手风琴选项卡不折叠

Accordion Tabs not collapsing

本文关键字：折叠 选项 手风琴      更新时间：2023-09-26

嗨，我不熟悉javascript，但我希望打开的选项卡在单击"-"符号时再次折叠，

示例链接：http://www.dev.redefinegraphicstudio.com/acp/SLOCPI%20Mobile/myclients-life-07.html

$.fn.expCollapse = function(){ 
    $mainContainer = $(this);
    $mainContainer.find('.acco-head').on('click',function(){
        $(this).parent().parent().find('.acco').each(function(){
            $(this).removeClass('active');
            $(this).find('.acco-content').stop().slideUp(500);
        });
        $(this).parent().addClass('active');
        $containerToOpen = $(this).next('.acco-content');
        $containerToOpen.stop().slideDown(700);
    });
}

这是代码：

谢谢！

尝试使用 slideToggle 而不是 slideDown 总是喜欢，

$mainContainer.find('.acco-head').on('click',function(){
    $('.acco').each(function(){ // don't make hierarchy, as you need to slideUp all contents
        $(this).removeClass('active');
        $(this).find('.acco-content').stop().slideUp(500);    
    });
    $(this).parent().addClass('active');
    $containerToOpen = $(this).next('.acco-content');
    $containerToOpen.stop().slideToggle(700);  // use slideToggle  
});


$.fn.expCollapse = function () {
  $mainContainer = $(this);
  $mainContainer.find('.acco-head').on('click', function () {
    $('.acco').each(function () { // don't make hierarchy, as you need to slideUp all contents
      $(this).removeClass('active');
      $(this).find('.acco-content').stop().slideUp(500);
    });
    $acco=$(this).closest('.acco')
   
    $containerToOpen = $(this).next('.acco-content');
    $containerToOpen.stop().slideToggle(700,function(){
       if($containerToOpen.is(':visible')){$acco.addClass('active')}
       else{$acco.removeClass('active')}
    }); // use slideToggle
   
    
  });
};
$('.acco-group').expCollapse();
<link href="http://www.dev.redefinegraphicstudio.com/acp/SLOCPI%20Mobile/styles/styles.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="acco-group">
  <div class="acco active">
    <h4 class="acco-head">Contact Information <span><!-- --></span></h4>
    <div class="acco-content" style="display: none; height: 606px; padding-top: 15px; margin-top: 0px; padding-bottom: 15px; margin-bottom: 0px;">
      <table class="align-formatted">
        <tbody>
          <tr>
            <td>Home Phone</td>
            <td>123123123</td>
          </tr>
          <tr>
            <td>Mobile Phone</td>
            <td>123123123</td>
          </tr>
          <tr>
            <td>Business Phone</td>
            <td>213123123123</td>
          </tr>
          <tr>
            <td>Email Address</td>
            <td>jdc@gmail.com</td>
          </tr>
          <tr>
            <td>Residence Address</td>
            <td>Makati Area</td>
          </tr>
          <tr>
            <td>City</td>
            <td>Makati</td>
          </tr>
          <tr>
            <td>Province/State</td>
            <td>Metro Manila</td>
          </tr>
          <tr>
            <td>Country</td>
            <td>Philippines</td>
          </tr>
          <tr>
            <td>ZIP Code</td>
            <td>1900</td>
          </tr>
          <tr>
            <td>Business Address</td>
            <td>Makati Area</td>
          </tr>
          <tr>
            <td>City</td>
            <td>Makati</td>
          </tr>
          <tr>
            <td>Province/State</td>
            <td>Metro Manila</td>
          </tr>
          <tr>
            <td>Country</td>
            <td>Philippines</td>
          </tr>
          <tr>
            <td>ZIP Code</td>
            <td>1900</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="acco">
    <h4 class="acco-head">Employment Information<span><!-- --></span></h4>
    <div class="acco-content" style="">
      <table class="align-formatted">
        <tbody>
          <tr>
            <td>Occupation</td>
            <td>President</td>
          </tr>
          <tr>
            <td>Employer Name</td>
            <td>ABC Corp</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

相关文章：