Question

我正在尝试构建一个简单的手风琴式FAQ。如果您点击某个问题，答案就会显示出来。

然而，

我遇到了问题。控制台没有错误......

这是我的JS代码

$("#contact-fake > li > span").click(function(){

    if(false == $(this).next().is(':visible')) {
        $('#contact-fake div').slideUp(300);
    }
    $(this).next().slideToggle(300);
});

$('#contact-fake li div:eq(0)').show();

和我的HTML

<ul>
    <li><span>Who is it for?</span><div>Test</div></li>
    <li><span>Why do it?</span><div>Test</div></li>
    <li><span>How do we start?</span><div>Test</div></li>
    <li><span>When can we start?</span><div>Test</div></li>
    <li><span>How do we continue?</span><div>Test</div></li>
    <li><span>Next steps?</span><div>Test</div></li>
</ul>

提前致谢（JSfiddle http://jsfiddle.net/dXNyK/） [R

Answer 1

使用$(this).next().slideUp(300);代替$('#contact-fake div').slideUp(300);

此外，当您使用直接后代选择器（>）时，请确保ul的ID为contact-fake。

jsFiddle here.

jQuery的：

$("#contact-fake > li > span").click(function(){    
    if(!$(this).next().is(':visible')) {
       $(this).next().slideUp(300);
    }
    $(this).next().slideToggle(300);
});    
$('#contact-fake li div:eq(0)').show();

Answer 2

您是否考虑过使用JQuery UI's accordion template？

slideToggle - 手风琴类型FAQ

2 个答案: