0

尝试使用 jQuery 构建一个常见问题解答页面。这是我正在使用的 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>
4

2 回答 2

1

A<li>必须始终是 a 的子级<ul>，并且 a<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');
});
于 2012-08-27T22:10:43.690 回答
0

请注意，ul您要在单击时展开是 的子级li，而不是兄弟级。因此，您应该使用.children('ul')而不是.next('#faq ul li').

试试这个：

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

Also, this is not a good practice to put the text inside an ul. Consider replacing inner ul with div or other element.

于 2012-08-27T22:31:02.083 回答