只有第一个FAQ元素在click-jquery上展开

时间:2012-06-29 11:47:15

标签: javascript jquery accordion

我正在尝试创建常见问题列表。第一次点击时答案显示正常,但我希望能够点击另一个问题并将该答案展开,另一个接近。这是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>

4 个答案:

答案 0 :(得分:1)

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

您的代码很好,只有使用==&gt; if (!$(this).hasClass('active')) { 代替 if(!$('.faq li').hasClass('active')) { :) 您在第一次条件检查中不需要此question.addClass('active');

Rest代码应该有帮助,:)

<强>码

$(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');
        }

    });



});​

答案 1 :(得分:1)

我认为我可以稍微改进你的代码并产生行为,并且还会缩短代码。

请注意,我跳过使用您的活动类来展示如何实现它。

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();

 });

答案 2 :(得分:1)

我喜欢如果元素已经可见,你不会向上滑动。

也许将.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();
  });
});

答案 3 :(得分:0)

为什么不使用手风琴。 http://jqueryui.com/demos/accordion/