JQuery переключатель отображения

Question

Я хотел бы создать список и иметь возможность переключать отображение дочерних элементов при нажатии. Должно быть просто, но я не могу заставить его работать. Есть мысли?

<code><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>

Answer 1

Несколько заметок:

1. «Я не могу заставить его работать» - это не проблема. Что отображается? Чем ты занимаешься? Что вы ожидаете случиться? Что на самом деле происходит?
2. Без HTML-кода очень сложно ответить.
3. дд обычно не дитя, а родной брат.

Answer 2

попробуйте что-то вроде:

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

Answer 3

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

Answer 4

Другие респонденты правы, что ваш селектор dd не прав. e.target - это a, который имеет только текст в качестве дочернего элемента, а не dd, который вы ищете. И как Марк указал (редактировать: прежде чем он удалил свой ответ) , вы хотите 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 будет работать просто отлично.

Answer 5

Здесь есть пара проблем.

1. $ ("dt a") - ваш селектор неверен, так как у вас нет ссылок "a". Должно быть $ ("dt") (я основал это на первоначальном искаженном HTML - когда я получил это из источника, у него не было ссылок)

2. $ (e.target) .children ("dd") неверен, так как "dd" - это брат dt в вашем HTML.

Вот рабочий пример:

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