只有第一個FAQ元素擴展點擊 - jquery

Question

我想創建一個FAQ列表。答案在第一次點擊時顯示正常，但我希望能夠點擊另一個問題並讓該答案展開，另一個關閉。這裏的JavaScript：

$(document).ready(function() { 
// hide all the answers 
$('.faq li div').hide(); 
$('.faq li').click(function(){ 
var question = $(this); 
var answer = $(this).find('div'); 
// if the faq isn't active 
if(!$('.faq li').hasClass('active')) { 
     answer.slideDown(); 
     $(this).siblings('div').slideUp(); 
     question.addClass('active'); 
} 
else { 
    answer.slideUp(); 
    question.removeClass('active'); 
} 

}); 



}); 

的CSS：

ul.faq { 
list-style:none; 
cursor:pointer; 
z-index:1; 

} 

ul.faq li h3 { 
background:#0A5C75 url(../images/faq-inactive.png) right no-repeat; 
color:#fff; 
padding:20px 50px 20px 10px; 
margin-bottom:10px; 
border:1px solid #fff; 
} 
ul.faq li.active h3 { 
background:#0A5C75 url(../images/faq-active.png) right no-repeat; 

} 
ul.faq li div { 
background:#FFFFFF; 
margin:0px 10px 10px 10px; 
padding:20px; 
overflow:hidden; 
/* added fixed width to stop the jerkyness*/ 
width:522px; 
position:relative; 
top:-10px; 
box-shadow: inset 0px 4px 4px 0px rgba(63, 70, 76, 0.15), 0px 4px 4px rgba(63, 70, 76, 0.15); 
} 

和HTML

<ul class="faq"> 
     <li> 
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?</a></h3> 
      <div>Vivamus rutrum arcu sit amet dolor pulvinar dictum. Etiam porttitor leo eget velit volutpat quis ultricies urna ornare. Quisque ac ultrices est. Ut lobortis malesuada justo, sed blandit sapien bibendum et. Donec vel ante eu orci pellentesque dictum. Phasellus molestie egestas du</div> 
     </li> 
     <li> 
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?</a></h3> 
      <div>This is the answer to question 2</div></li> 
     <li> 
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?</a></h3> 
      <div>This is the answer to question 3</div> 
     </li> 
</ul> 

Answer 1

爲什麼不使用手風琴。 http://jqueryui.com/demos/accordion/

Answer 2

工作演示http://jsfiddle.net/e3Bec/ORhttp://jsfiddle.net/XGJXM/

你的代碼是正確的唯一的事情就是用==>的if (!$(this).hasClass('active')) {代替if(!$('.faq li').hasClass('active')) {:)此外你不需要這在您的第一個條件檢查question.addClass('active');

其餘代碼應該幫助，:)

代碼

$(document).ready(function() { 
    // hide all the answers 
    $('.faq li div').hide(); 
    $('.faq li').click(function() { 
     $('div').slideUp(); 
     var question = $(this); 
     var answer = $(this).find('div'); 
     // if the faq isn't active 
     if (!$(this).hasClass('active')) { 
      answer.slideDown(); 
      $(this).siblings('div').slideUp(); 
      //question.addClass('active'); 

     } 
     else {   
      answer.slideUp(); 
      question.removeClass('active'); 
     } 

    }); 



});​ 

Answer 3

我想我可以在你的代碼提高了一點，產生的行爲以及通過公平一點縮短代碼。

請注意，我跳過了使用您的主動類來展示如何實現它。

Here's a tinker.io for demo我在FF13和Chrome

$('.faq li div').hide(); 
$('.faq li').click(function(event) { 

    var clickedQuestion = event.target; 
    var answer = $(clickedQuestion).siblings('div'); 

    if($('ul.faq').find('div').is(':visible')){ 
     $('ul.faq').find('div').slideUp();  
    } 
    answer.slideDown(); 

}); 

Answer 4

我喜歡你是不是向上滑動的元素，如果它已經可見了測試。

也許將.hide移動到css「display：none」中，沒有意義等待dom加載來隱藏它們。

$(document).ready(function() { 
    $('.faq li').click(function(event){ 
    $(this).find('div').not(":visible").slideDown(); 
    $('.faq li div:visible').not($(this).find('div')).slideUp(); 
    }); 
});