Question

因为用户必须两次点击相同的dt才能隐藏其子元素，所以如何点击任何其他dt后隐藏它的子元素。提前谢谢。

<script type="text/javascript">
$(document).ready(function () {
        $('#faq').find('dd').hide().end().find('dt').click(function () {
            $(this).next().slideToggle();
        });
    });
</script>

<dl id="faq">
    <dt>Question 1?</dt>
    <dd>
        Weee look at me I can type!!!
    </dd>

    <dt>Question 2?</dt>
    <dd>
        Weee look at me I can type too!!!
    </dd>
</dl>

Answer 1

我假设您希望一次只显示一个dd，并发布此代码：

$(document).ready(function () {
    $('#faq').find('dd').hide().end().find('dt').click(function () {
        $(this).next().slideDown();
        $(this).siblings('dd').not($(this).next()).slideUp();
    });
});

$(this).next().slideDown();向下滑动下一个元素，即dd元素，并将其向下滑动。
$(this).siblings('dd').not($(this).next()).slideUp();幻灯片向上所有其他dd元素（.not($(this).next())位）。

.siblings()正是您要找的，以及.not()。

Demonstration JSFiddle here

Answer 2

Here's a jsfiddle您的代码。

您可以点击dt来切换它的“孩子”dd，但是根据它的声音，您希望在任何{{1}时隐藏所有可见的dd点击。

您可以通过切换当前dt旁边.not()的所有dt元素来执行此操作：

dd

查看updated jsfiddle。

您可以通过合并$('#faq').find('dd').hide().end().find('dt').click(function () { $('#faq').find('dd:visible').not($(this).next()).slideToggle(); $(this).next().slideToggle(); });回调中的第一行和第二行来进一步压缩代码，如here所示。

Answer 3

$(function() {
$('#faq').find('dd:last-child').hide().end().find('dt').click(function () {
    $(this).next().slideDown();
    $(this).siblings('dd').not($(this).next()).slideUp();
});

我刚添加（last：child）class伪，因为我只需要显示一个

谢谢，我的代码让我很头疼，你的代码很可读:-D

jQuery xhtml dd dl dt

3 个答案: