页面加载时关闭所有折叠部分

时间:2014-01-20 09:04:00

标签: jquery accordion jquery-ui-accordion

我正在使用JQuery Accordian,我想在页面加载时隐藏所有部分。仅当用户单击标题时才应打开该部分。任何人都可以帮助我..

(文档)$。就绪(()的函数 {

$('.accordion-header').toggleClass('inactive-header');

var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });


$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');


$('.accordion-header').click(function () {
    if($(this).is('.inactive-header')) {
        $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
    }

    else {
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
    }
});

return false;

});

HElp ..谢谢

2 个答案:

答案 0 :(得分:0)



  Add this to your jQuery
  **jQuery('.panel-collapse').removeClass("in");**
  This will close the accordion on page load

  
`<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
    <div class="panel-body">			
      <div class="textwidget">
        <ul>
          <li>1</li>
          <li>2</li>
        </ul>
      </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

尝试使用.collapse('hide')方法:

$(document).ready(function() {
     $('#yourAccordionId').collapse("hide");

     // Rest of the code here

});