Javascript 只有第一个FAQ元素在单击时展开-jquery

我正在尝试创建一个常见问题列表。第一次单击时，答案显示良好，但我希望能够单击另一个问题，并将该答案展开，然后关闭另一个问题。下面是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>

Lorem ipsum dolor sit amet，是一位杰出的献身者。你是说麦格纳，法雷特拉，奥奇？
发情万岁，这是我的心愿。我是利奥·埃吉特·维利特·帕特·奎斯·厄尔纳·奥纳雷。这是我最喜欢的。但洛博蒂斯·马莱苏亚达·胡斯托（lobortis malesuada justo）则用了温和的智者比本杜姆（bibendum）和多内克（Donec）的话来反驳欧盟或欧洲的佩朗特式格言。埃吉斯塔斯角菌


Lorem ipsum dolor sit amet，是一位杰出的献身者。你是说麦格纳，法雷特拉，奥奇？
这是问题2的答案

Lorem ipsum dolor sit amet，是一位杰出的献身者。你是说麦格纳，法雷特拉，奥奇？
这是问题3的答案


为什么不使用手风琴呢
 为什么不用手风琴呢
 工作演示或

你的代码很好，只是使用==>
if（！$（this.hasClass（'active'））{
而不是
if（！$（'faq li'）。hasClass（'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');
        }

    });



});​

工作演示或

你的代码很好，只是使用==>
if（！$（this.hasClass（'active'））{
而不是
if（！$（'faq li'）。hasClass（'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');
        }

    });



});​

我想我可以对你的代码做一些改进，产生一些行为，也可以将代码缩短一些

注意，我跳过了使用您的活动类，以展示如何实现它

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

 });

我想我可以对你的代码做一些改进，产生一些行为，也可以将代码缩短一些

注意，我跳过了使用您的活动类，以展示如何实现它

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

 });

我喜欢你没有向上滑动元素，如果它已经是可见的

可能将.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();
  });
});

我喜欢你没有向上滑动元素，如果它已经是可见的

可能将.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();
  });
});

使用JSFIDLE中的Firefox13，如果元素以“随机”方式单击，则此代码会产生非常奇怪的行为顺序，Chrome中也有同样奇怪的行为。@limelights Coolos man-我在safari mac osx lion中试过，虽然在firefox bruv中有这样的行为，但还是为评论喝彩，再次感谢评论
：）
有时当你在“随机”中单击元素时订单，点击停止工作，需要点击两下才能打开！可能是我也在胡闹！：）Hiya@limelights试试这个bruv plz:应该正常工作！
：）
@limelights Cheers man anyhoo+1，下面我将点击，：P有一个不错的答案。在JSFIDLE中使用Firefox 13，此代码生成一个ve如果元素按“随机”顺序单击，Chrome中也会出现奇怪的行为。@limelights Coolos man-我在safari mac osx lion中尝试过，欢迎评论，尽管firefox bruv中出现了这种行为，再次感谢您的评论
：）
有时当您按“随机”顺序单击元素时订单，点击停止工作，需要点击两下才能打开！也可能是在耍我！：）Hiya@limelights试试这个bruv plz:应该可以正常工作！
：）
@limelights Cheers man anyhoo+1对你的答案，下面我将点击，：P有一个很好的答案。谢谢你们的反馈。非常有用。我很高兴st在开头添加了一行以隐藏所有答案，否则我使用了上面的代码，非常干净。Cheers$（文档）。ready（函数（）{$（'.faq li div'）。hide（）；$（'.faq li'）。单击（函数（事件）{$（this）。查找（'div'）。不（“：可见”）。slideDown（）；$（'.faq li div:visible'）。不（$（this）。查找（'div'））。slideUp（）；；）；）事实上，还有一件事，这不允许我点击“可见”答案+问题来收缩自己。我该怎么做？嗨，史蒂夫，很抱歉之前没有看到。在单击函数的第一行，只需将.not（“：visible”）.slideDown（）替换为.slideToggle（）谢谢大家的反馈。非常有用。我刚开始添加了一行以隐藏所有答案，否则我使用了上面的代码，非常干净。Cheers$（文档）。ready（函数（）{$（'.faq li div'）。hide（）；$（'.faq li'）。单击（函数（事件）{$（this.find（'div'）。不（“：可见”）。slideDown（）；$（'.faq li div:visible'））.not（$（this）.find（'div'））.slideUp（）；}）；}）实际上，还有一件事，这不允许我点击“可见”答案+问题来收缩自己。我该怎么做呢？嗨，史蒂夫，很抱歉之前没有看到这个。在click函数的第一行，只需将.not（“：visible”）.slideDown（）替换为.slideToggle（）