开发者

JQuery - Toggling divs with only selectors

开发者 https://www.devze.com 2023-02-17 19:22 出处:网络
If I have html such as: <ul id=\"tags\"> <li> <a href=\"#\">Toggle</a> <div>Content1</div>

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 开发者_如何学Clink 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?


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

or

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


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


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

精彩评论

暂无评论...
验证码 换一张
取 消