Question

尝试使用jQuery构建FAQ页面。这是我正在使用的js：

$("#faq li").click(function (event) {
    event.preventDefault(); 
    $(this).next("#faq li ul").slideToggle("fast");
});

不确定为什么它不起作用，感谢任何帮助。

这是HTML：

<ul id="faq">

<li>Where are you located?
<ul>
We are located in Southern Cali!
</ul>
</li>

<li>What are your service times?
<ul>
Our service times are 7:00, 8:00, and 9:00!
</ul>
</li>

</ul>

Answer 1

<li>必须始终是<ul>的孩子，而<ul>只能包含其他内容。后一点意味着您的标记无效。

您应该使用<dl>（定义列表），然后使用<dt>作为项目标题，使用<dd>作为项目文本。对于此用例，这将是完全的列表：

<dl id="faq">
<dt>Where are you located?</dt>
<dd>We are located in Southern Cali!</dd>
<dt>What are your service times?</dt>
<dd>Our service times are 7:00, 8:00, and 9:00!</dd>
</dl>

代码如下（使用事件委托）

$("#faq dt").click(function() {
   $(this).next('dd').slideToggle('fast');
});

Answer 2

请注意，您希望在点击时展开的ul是li的孩子，而不是兄弟姐妹。因此，您应该使用.children('ul')代替.next('#faq ul li')。

试试这个：

$("#faq li").click(function (event) {
    event.preventDefault(); 
    $(this).children("ul").slideToggle("fast");
});

此外，将文本放在ul中并不是一个好习惯。考虑将内部ul替换为div或其他元素。

用jQuery滑动切换NEXT li元素

2 个答案: