jQuery中的手風琴Boostrap

-1

簡單的事情。我必須像bootstrap一樣製作手風琴（只使用jquery，沒有來自boostrap的JavaScript代碼），但問題是點擊後我無法隱藏元素。我的代碼是here。jQuery中的手風琴Boostrap

如果您點擊代碼驗證div有類但每次都返回false。可能是什麼原因？

2017-07-21 Filip de Tillier

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

鏈接 - > 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"); 
      }; 
     };

來源

2017-07-21 07:29:20

這是你在找什麼？ –

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

你能接受我的答案@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>

來源

2017-09-02 19:29:45

jQuery中的手風琴Boostrap

回答

相關問題