jQuery中的手风琴Boostrap

问题描述：

简单的事情。我必须像bootstrap一样制作手风琴（只使用jquery，没有来自boostrap的JavaScript代码），但问题是点击后我无法隐藏元素。我的代码是here。jQuery中的手风琴Boostrap

如果您点击代码验证div有类但每次都返回false。可能是什么原因？

表明你做了什么至今... –

链接 - > goo.gl/UkSo9o –

答

试试这个：

function accordion() { 
      if ($(this).find('.panel-collapse').hasClass('in')) { 
       $(this).find('.panel-collapse').removeClass("in"); 
      } else { 
       $(this).find('.panel-collapse').addClass("in"); 
      }; 
     };

这是你在找什么？ –

它正在工作！好的，谢谢:) –

你能接受我的答案@FilipdeTillier？ –

答

$(document).ready(function($) { 
 
\t \t \t $('#accordion').find('.panel-heading').click(function(){ 
 
\t 
 
\t \t \t \t //Expand or collapse this panel 
 
\t \t \t \t $(this).next().slideToggle('fast'); 
 
\t 
 
\t \t \t \t //Hide the other panels 
 
\t \t $(".panel-collapse").not($(this).next()).slideUp('fast'); 
 
\t 
 
\t \t \t }); 
 
\t \t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
    
 
    <div class="panel-group" id="accordion"> 
 
     <div id="collapse1" class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a> 
 
     Collapsible Group 1</a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapseContainer1" class="panel-collapse collapse in"> 
 
       <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
      </div> 
 
     </div> 
 
     <div id="collapse2" class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a> 
 
     Collapsible Group 2</a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapseContainer2" class="panel-collapse collapse"> 
 
       <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
      </div> 
 
     </div> 
 
     <div id="collapse3" class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a> 
 
     Collapsible Group 3</a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapseContainer3" class="panel-collapse collapse"> 
 
       <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
      </div> 
 
        </div> 
 
    </div>

jQuery中的手风琴Boostrap

相关推荐