Question

如果我有html如：

<ul id="tags">
    <li>
        <a href="#">Toggle</a>
        <div>Content1</div>
    </li>
    <li>
        <a href="#">Toggle</a>
        <div>Content2</div>
    </li>
</ul>

如何编写JQuery select / click事件，以便每个链接切换下面的div？

$('#tags li a').click(function(){
    $('#tags '+this.parent()+' div').slideToggle();
});

尝试了类似的东西，但它没有给我结果。有什么帮助吗？

Answer 1

$('#tags li a').click(function(){
    $(this).siblings("div").slideToggle();
});

或

$('#tags li a').click(function(){
    $(this).next("div").slideToggle();
});

Answer 2

$('#tags li a').click(function(){ 
  $(this).next('div').slideToggle();    
});

Answer 3

[RE-EDIT]：

<script src="jquery.js"></script>

<ul id="tags">
    <li  style="display: none">
        <a href="#">toggle</a>
    <div>Content1</div>
    </li>
    <li>
        <a href="#">toggle</a>
    <div>Content2</div>
    </li>
</ul>


<script>
$('ul li a').click(function(){
    $("ul li").slideToggle('slow');
});
</script>

[老]：

<ul id="tags">
    <li  style="display: none">
    <div>Content1</div>
    </li>
    <li>
    <div>Content2</div>
    </li>
</ul>
<a href="#" class="toggle">Toggle</a>


<script>
$('.toggle').click(function(){
    $("ul li").slideToggle('slow');
});
</script>

JQuery - 仅使用选择器切换div

3 个答案: