0

我正在尝试创建一个常见问题解答列表。首次单击时答案显示正常，但我希望能够单击另一个问题并让该答案展开并关闭另一个。这是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

4 回答 4

1

我认为我可以对您的代码进行一些改进并产生行为，并将代码缩短一点。

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

这是我在 FF13 和 Chrome 中测试的 tinker.io 演示

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

 });
于 2012-06-29T12:09:59.580 回答
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();
  });
});
于 2012-06-29T12:43:52.090 回答
1

工作演示 http://jsfiddle.net/e3Bec/ 或 http://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');
        }

    });



});​
于 2012-06-29T11:55:14.127 回答
0

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

于 2012-06-29T11:49:43.233 回答