使用jquery为可折叠手风琴创建自己的脚本

Question

我有一个简单的手风琴代码片段。目前你可以点击accordion-control然后它会打开每个面板1乘1.然而我想要它，所以当用户点击另一个accordion-control按钮时，它会关闭当前显示的面板并显示用户选择的内容

代码

＆＃13;

＆＃13;

$(function() {
  $('.accordion').on('click', '.accordion-control', function(e) {
    e.preventDefault();
    $('.accordion-control').removeClass('active');
    $(this).next('.accordion-panel').addClass('active').not(':animated').slideToggle();
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion no-padding no-margin-bottom">
  <li>
    <button class="accordion-control text-md-left">Accordion button</button>
    <div class="accordion-panel">
      <ul class="no-padding">
        <li>lorem ipsum text</li>
      </ul>
    </div>
  </li>
  <li>
    <button class="accordion-control text-md-left">Accordion button</button>
    <div class="accordion-panel">
      <ul class="no-padding">
        <li>lorem ipsum text</li>
      </ul>
    </div>
  </li>
  <li>
    <button class="accordion-control text-md-left">Accordion button</button>
    <div class="accordion-panel">
      <ul class="no-padding">
        <li>lorem ipsum text</li>
      </ul>
    </div>
  </li>
  <li>
    <button class="accordion-control text-md-left">Accordion button</button>
    <div class="accordion-panel">
      <ul class="no-padding">
        <li>lorem ipsum text</li>
      </ul>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

得到以下工作。如果这是您想要的，请告诉我。我决定在开始时隐藏相关信息。如果要在开始时显示它，您应该还需要将活动类添加到所有面板。

＆＃13;

＆＃13;

$('.accordion-panel').hide();
$('.accordion-control').click(function() {
    if($(this).next('.accordion-panel').hasClass('active')){
       $('.active').removeClass('active').slideUp();
    }else{
      $('.active').removeClass('active').slideUp();
     $(this).next('.accordion-panel').addClass('active').slideDown();
    }
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion no-padding no-margin-bottom">
    <li>
        <button class="accordion-control text-md-left">Accordion button</button>
        <div class="accordion-panel">
            <ul class="no-padding">
                <li>lorem ipsum text</li>
            </ul>
        </div>
    </li>
    <li>
        <button class="accordion-control text-md-left">Accordion button</button>
        <div class="accordion-panel">
            <ul class="no-padding">
                <li>lorem ipsum text</li>
            </ul>
        </div>
    </li>
    <li>
        <button class="accordion-control text-md-left">Accordion button</button>
        <div class="accordion-panel">
            <ul class="no-padding">
                <li>lorem ipsum text</li>
            </ul>
        </div>
    </li>
    <li>
        <button class="accordion-control text-md-left">Accordion button</button>
        <div class="accordion-panel">
            <ul class="no-padding">
                <li>lorem ipsum text</li>
            </ul>
        </div>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我个人会以不同的方式解决这个问题。

为什么不在任何时候缩小所有手风琴，并显示 点击的手风琴？

简明的JSFiddle：

＆＃13;

＆＃13;

$('.accordion').on('click', '.accordion-control', function(e) {

    //Any time you'll be using a selector more than once, set it to a variable
    $ap = $(this).next(".accordion-panel");

    //Restrict closing all accordions
    if (!$ap.hasClass("active")) {

        //Slide all the accordions up
        $(".accordion-panel").slideUp().removeClass("active");

        //Slide the clicked accordion down
        $ap.slideToggle().addClass("active");
    }
});

＆＃13;

.accordion-panel {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion no-padding no-margin-bottom">
    <li>
        <button class="accordion-control text-md-left">Accordion button</button>
        <div class="accordion-panel">
            <ul class="no-padding">
                <li>lorem ipsum text</li>
            </ul>
        </div>
    </li>
    <li>
        <button class="accordion-control text-md-left">Accordion button</button>
        <div class="accordion-panel">
            <ul class="no-padding">
                <li>lorem ipsum text</li>
            </ul>
        </div>
    </li>
    <li>
        <button class="accordion-control text-md-left">Accordion button</button>
        <div class="accordion-panel">
            <ul class="no-padding">
                <li>lorem ipsum text</li>
            </ul>
        </div>
    </li>
    <li>
        <button class="accordion-control text-md-left">Accordion button</button>
        <div class="accordion-panel">
            <ul class="no-padding">
                <li>lorem ipsum text</li>
            </ul>
        </div>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;