JQuery - 仅使用选择器切换div

Question

If I have html such as:

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

How can I write a JQuery select/click event such that each link toggles the div below it?

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

Tried something like that but its not giving me the results. Any help?

Answer 1

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

or

$('#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>

[OLD]:

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