单击按钮时折叠当前 div 展开下一个 div

Question

我正在处理大型问答表单的一部分，其中一个页面上有手风琴，您可以在此处查看。

表单的工作方式是，当您在一个手风琴中回答问题时，它会折叠然后展开下一个手风琴，但复选框除外，因为它们可以有多个选择。

我有一个名为 "Next" 的按钮，它带有复选框，默认情况下该按钮将被隐藏，我想要做的是一旦为复选框选择了一个选项，"Next" 按钮将淡入，单击该按钮后，它会折叠当前的手风琴并展开下一个。

现在所有的工作就是折叠当前元素的点击。

下面的代码。

$(document).ready(function() {

  $(".accordion_head").click(function() {
    if ($('.accordion_body').is(':visible')) {
      $(".accordion_body").slideUp(300);
      $(".updown").text('\u25BC');
    }
    if ($(this).next(".accordion_body").is(':visible')) {
      $(this).next(".accordion_body").slideUp(300);
      $(this).children(".updown").text('\u25BC');
    } else {
      $(this).next(".accordion_body").slideDown(300);
      $(this).children(".updown").text('\u25B2');
    }
  });
  

  });
  $(".accordion_body select").change(function() {
    nextQuestion($(this));
  });
  $(".accordion_body input").change(function() {

    nextQuestion($(this));

  });

  $(".next-button").click(function() {
    if ($('.accordion_body').is(':visible')) {
      $(".accordion_body").slideUp(300);
      $(".updown").text('\u25BC');
    }
    if ($(this).next(".accordion_body").is(':visible')) {
      $(this).next(".accordion_body").slideDown(300);
      $(this).children(".updown").text('\u25BC');
    } else {
      $(this).next(".accordion_body").slideDown(300);
      $(this).children(".updown").text('\u25B2');
    }
  });

function nextQuestion(currentQuestion) {
  var parentEle = currentQuestion.parents(".accordion_main");
  if (parentEle.next()) {
    parentEle.find(".question-mark").addClass("glyphicon glyphicon-ok check-mark").removeClass("question-mark").text("");
    if (currentQuestion.attr('type') != 'checkbox') {
      if (parentEle.next().find(".accordion_head").length > 0) {
        parentEle.next().find(".accordion_head").click();
      } else {
        //there is no next--> try to go to the next colum
        parentEle.parent("div").next("div").find(".accordion_head").first().click();
      }
    }

  }

}

.accordion_container {
  width: 100%;
  padding: 1em;
}

.accordion_head {
  background-color: #FFF;
  color: #555;
  cursor: pointer;
  font-family: arial;
  font-size: 14px;
  margin: 10px 0 0px 0px;
  padding: 10px 11px;
  font-weight: bold;
  border: 1px solid #ddd;
}

.accordion_body {
  background: #EEE;
  padding: 1em;
}

.accordion_body p {
  padding: 18px 5px;
  margin: 0px;
}

.check-mark,
.question-mark {
  border-style: solid;
  border-width: 1px;
  border-radius: 50%;
  float: right;
  height: 28px;
  line-height: 16px;
  padding: 5px;
  position: relative;
  width: 28px;
  text-align: center;
  top: -4px;
}

.check-mark {
  border-color: #c4db30;
  color: #c4db30;
}

.question-mark {
  border-color: #086cff;
  color: #086cff;
  font-size: 1.3em;
}

.plusminus {
  float: left;
  margin-right: 10px;
}

.next-button {
  /* display: none; */
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<form action="demo_form.aspx" method="get">
  <div class="accordion_container">
    <p>Answer all question below to complete the order request</p>
    <div class="row">
      <div class="col-xs-12 col-md-6 col-lg-6">
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> What type of sensors are required? <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: block;">
            <select>
              <option value="sensors">None Selected</option>
              <option value="sensors">Photocell On</option>
              <option value="sensors">Off Control Only</option>
              <option value="sensors">Photocell On / Off Control Only</option>
            </select>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="plusminus">&#9660;</span> Please select if the below products are present / required. <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <div class="row">
              <div class="col-xs-6">
                <input type="checkbox" name="products" value="nWifi">nWifi (nLight)
                <br>
                <input type="checkbox" name="products" value="nLightFixtures">nLightFixtures
                <br>
                <input type="checkbox" name="products" value="xCella">xCella (LC&D)
                <br>
              </div>
              <div class="col-xs-6">
                <input type="checkbox" name="products" value="DaylightHarvesting">Daylight Harvesting
                <br>
                <input type="checkbox" name="products" value="xPoint">xPoint (LC&D)
                <br>
                <input type="checkbox" name="products" value="GraphicsSoftare">Graphics Sofware
                <br>
              </div>
            </div>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> What type of construction is this? <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="radio" name="contruction" value="NewConstruction" />New Construction
            <br>
            <input type="radio" name="construction" value="Retrofit" />Retrofit
            <br>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Scope of work <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="radio" name="work" value="AllAreas" />New Construction
            <br>
            <input type="radio" name="work" value="Retrofit" />Retrofit
            <br>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> BMS Integration <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <div class="row">
              <div class="col-xs-6">
                <input type="checkbox" name="bms-integration" value="BACnetIP">BACnet IP
                <br>
                <input type="checkbox" name="bms-integration" value="BACnetMSTP">BACnet MSTP
                <br>
                <input type="checkbox" name="bms-integration" value="Modbus">Modbus
                <br>
              </div>
              <div class="col-xs-6">
                <input type="checkbox" name="bms-integration" value="LonWorks">LonWorks
                <br>
                <input type="checkbox" name="bms-integration" value="Metasys">Metasys
                <br>
                <input type="checkbox" name="bms-integration" value="Other">Other
                <br>
              </div>
            </div>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Dimming Information <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="checkbox" name="dimming-information" value="TenV">0-10V
            <br>
            <input type="checkbox" name="dimming-information" value="DALI">DALI
            <br>
            <input type="checkbox" name="dimming-information" value="TwoW">2W
            <br>
            <input type="checkbox" name="dimming-information" value="threeW">3W
            <br>
            <input type="checkbox" name="dimming-information" value="Other">Other
            <br>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
      </div>
      <!-- end .col-xs-6 -->
      <div class="col-xs-12 col-md-6 col-lg-6">
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Voltages Used <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="checkbox" name="voltage" value="volt120">120 / 277
            <br>
            <input type="checkbox" name="voltage" value="volt208">208
            <br>
            <input type="checkbox" name="voltage" value="volt347">347
            <br>
            <input type="checkbox" name="voltage" value="volt480">480
            <br>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Interfaces <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="checkbox" name="interfaces" value="BAS">BAS / HVAC
            <br>
            <input type="checkbox" name="interfaces" value="AV">A/V System
            <br>
            <input type="checkbox" name="interfaces" value="Shades">Shades
            <br>
            <input type="checkbox" name="interfaces" value="LightingControlSystems">Other Lighting Control Systems
            <br>
            <input type="checkbox" name="interfaces" value="Other">Other
            <br>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Maintain switch ganging configurations? <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="radio" name="switch ganging" value="Yes">Yes
            <br>
            <input type="radio" name="switch ganging" value="No">No
            <br>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Emergency Design <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="checkbox" name="emergency design" value="Generator">Generator
            <br>
            <input type="checkbox" name="emergency design" value="Battery">Battery
            <br>
            <input type="checkbox" name="emergency design" value="GTD">GTD
            <br>
            <input type="checkbox" name="emergency design" value="Shunting Required">Shunting Required
            <br>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Energy Code Compliance (Also Provide Version if Selected) <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="checkbox" name="energy code compliance" value="IECC">IECC
            <br>
            <input type="checkbox" name="energy code compliance" value="ASHRAE">ASHRAE 90.1
            <br>
            <input type="checkbox" name="energy code compliance" value="Title24">Title 24
            <br>
            <input type="checkbox" name="energy code compliance" value="Other">Other
            <br>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
      </div>
      <!-- end .col-xs-6 -->
    </div>
    <!-- end .accordion_container -->
</form>

Answer 1

为什么不直接使用这个：

$(".next-button").click(function () {
      nextQuestion($(this));
});

单击按钮时折叠当前 div 展开下一个 div

Collapse current div expand next div on button click

jquery

expand

accordion

collapse

twitter-bootstrap