0

我正在尝试构建一个简单的手风琴风格常见问题解答。如果你点击一个问题，答案就会揭晓。

但是，我在让它工作时遇到问题。控制台没有错误...

这是我的 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

4

2 回答 2

1

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

此外，当您使用直接后代选择器 ( >) 时，请确保ul具有 id contact-fake。

jsFiddle在这里。

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();
于 2013-06-03T15:34:01.543 回答
0

您是否考虑过使用JQuery UI 的手风琴模板？

于 2013-06-03T15:38:06.440 回答