在jQuery中切换块

时间:2010-04-28 21:33:44

标签: jquery html events

我想点击一个标题链接并将该块直接隐藏或显示(使用slideToggle)

由于

<div class='header'><a href='#'>Header</a></div>

<div class='block'>
<div class='test>Some Text</div>
<div class='test>Some Text</div>
<div class='test>Some Text</div>
</div>

<div class='header'><a href='#'>Header</a></div>

<div class='block'>
<div class='test>Some Text</div>
<div class='test>Some Text</div>
<div class='test>Some Text</div>
</div>

<div class='header'><a href='#'>Header</a></div>

<div class='block'>
<div class='test>Some Text</div>
<div class='test>Some Text</div>
<div class='test>Some Text</div>
</div>

4 个答案:

答案 0 :(得分:3)

试试这个:

$(function(){
  $('.header a').click(function(){
    $(this).parent().next().slideToggle();
  });
});

答案 1 :(得分:0)

这样的事情应该有效:

$("DIV.header A").click(function(){$(this).parent().next().slideToggle();});

答案 2 :(得分:0)

$(function()
{
    $(".header").click(function()
    {
        $(this).next().toggle();
    });
});

或者,如果您想要滑动切换,请尝试:

$(function()
{
    $(".header").click(function()
    {
        $(this).next().slideToggle();
    });
});

答案 3 :(得分:0)

$('.header').click(function(){
  $(this).next(".block").slideToggle("slow", function(){
         $(".block").not(this).slideUp("slow");
   });
}); 

此代码可以帮助您解决问题。