只有第一个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(); 
    }); 
});