2016-09-26 37 views
-2

好了,所以我有我正在這裏頁面上的這個手風琴是它的代碼:JS手風琴沒有崩潰所有選項卡

<section> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-sm-12 text-center"> 
     <h4 class="mb16">Frequently Asked Questions</h4> 
     <p class="lead mb64"> Holla @twitterhandle if you've got more questions and we'll do our best to answer. </p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-10 col-sm-offset-1"> 
     <ul class="accordion accordion-2 one-open"> 
      <li> 
      <div class="title"> 
       <h4 class="inline-block mb0">How can X increase productivity?</h4> 
      </div> 
      <div class="content"> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p> 
      </div> 
      </li> 
      <li> 
      <div class="title"> 
       <h4 class="inline-block mb0">Does X do X?</h4> 
      </div> 
      <div class="content"> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p> 
      </div> 
      </li> 
      <li> 
      <div class="title"> 
       <h4 class="inline-block mb0">Will my staff need to take a course on how to operate the application?</h4> 
      </div> 
      <div class="content"> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p> 
      </div> 
      </li> 
      <li> 
      <div class="title"> 
       <h4 class="inline-block mb0">What does X offer?&nbsp;</h4> 
      </div> 
      <div class="content"> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing 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. </p> 
      </div> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</section> 

的JS手風琴是:

$('.accordion li').click(function() { 
    if ($(this).closest('.accordion').hasClass('one-open')) { 
     $(this).closest('.accordion').find('li').removeClass('active'); 
     $(this).addClass('active'); 
    } else { 
     $(this).toggleClass('active'); 
    } 
}); 

當我重新加載頁面時,所有選項卡都會關閉。然而,擴大其中一個之後,我再也無法關閉它們了。其中一個仍然開放。任何幫助,將不勝感激。

+0

看起來這個代碼的CSS不見了?這是我創建的[小提琴](https://jsfiddle.net/uowauLvo/),你可以嘗試更新它來演示你的問題嗎? – Dhananjay

回答

0

不要按代碼關閉。如果要關閉所有選項卡,請設置可摺疊屬性爲true。這是示例代碼。

<script> 
    $(function() { 
     $("#accordion").accordion({ 
      collapsible: true 
     }); 
    }); 
</script>