Question

我想创建一个列表，并能够在点击时切换子项的显示。应该很简单，但我不能让它工作。有什么想法吗？

<script>
$(document).ready(function(){

    $("dt a").click(function(e){
        $(e.target).children("dd").toggle();    
    });
});
</script>
<style>
dd{display:none;}
</style>


<pre>
<dl>
    <dt><a href="/">jQuery</a></dt>
    <dd>
    <ul>
        <li><a href="/src/">Download</a></li>
        <li><a href="/docs/">Documentation</a></li>
        <li><a href="/blog/">Blog</a></li>

    </ul>
    </dd>
    <dt><a href="/discuss/">Community</a></dt>
    <dd>
    <ul>
        <li><a href="/discuss/">Mailing List</a></li>
        <li><a href="/tutorials/">Tutorials</a></li>    
        <li><a href="/demos/">Demos</a></li>
        <li><a href="/plugins/">Plugins</a></li>
    </ul>
    </dd>   
</dl>
</pre>

Answer 1

一些注意事项：

“我无法让它工作”是没有问题的描述。什么显示？你是做什么？你期望发生什么？实际上发生了什么？
如果没有HTML代码，这很难回答。
dd通常不是dt的孩子，而是兄弟姐妹。

Answer 2

尝试类似：

$("dt a").click(function(){
    $(this).parent().next("dd:first").toggle();    
    return false;
});

Answer 3

这里有几个问题。

~~$（“dt a”） - 您的选择器错误，因为您没有任何“a”链接。应该是$（“dt”）~~（我基于最初的格式错误的html - 当我从源头获得它时，它没有链接）
$（e.target）.children（“dd”）不正确，因为“dd”是HTML中dt的兄弟。

这是一个有效的例子：

$(document).ready(function() {
    $("dt a").click(function(e) {
        $(e.target).parent().next().toggle();
        return false;
    });
});

Answer 4

其他受访者对您的dd选择器不正确是正确的。 e.target是a，其中只有文字作为其子项，而不是您要查找的dd。而Marc pointed out （编辑：在删除答案之前），您希望点击处理程序中的return false。

我喜欢在做这类事情时使用类，因为它使代码显式而不依赖于DOM的结构。

这样的事情：

<script>
$(document).ready(function(){

        $("dt a").click(function(e){
                // Toggle elements whose class is named by the anchor class
                $('dd.'+this.className).toggle(); 
                return false;
        });
});
</script>
<style>
dd{display:none;}
</style>


<pre>
<dl>
    <dt><a class='jQuery' href="/">jQuery</a></dt>
    <dd class='jQuery'>  <!-- Set the class name to the anchor class -->
    <ul>
        <li><a href="/src/">Download</a></li>
        <li><a href="/docs/">Documentation</a></li>
        <li><a href="/blog/">Blog</a></li>

    </ul>
...

如果你不关心你的结构变化，tanathos' solution将会正常工作。

Answer 5

$("#id").css("display", "none");
$("#id").css("display", "block");

jquery切换显示

5 个答案: