开发者

How can I change this Jquery function (toggle)

<head>
<script type="text/javascript">
$(document).ready(function(){
$(".open_list").hide();
$(".trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("800");
   });
});
 </script>

I'm doing a list with some hide div in it and i did this jquery function to do so. The thing is that this function makes that when you click on the trigger link it will show you the div that follows to open_list.

I'm looking for another function that allows me 开发者_JAVA技巧the same thing but that activates the div that follows .open_list but with a determinated class.

So it will ignore the divs that follow the open_list that don't have that class on them.

I have been doing all day with this and i can't find the right way to do this. Anyone who knows it please?

so I put the script:

 <script type="text/javascript">
$(document).ready(function(){
$(".open_list").hide();
$(".trigger").click(function(){
  $(this).toggleClass("active").nextAll('.campaigns_list').slideToggle("800");
});

});

But still don't work. I need the h1 doesn't move at all when the divs are open.


You can use nextAll() filtered by your selector, then grab the first() element of that list:

$(".trigger").click(function(){
    $(this).toggleClass("active").nextAll('.yourClass').first().slideToggle("800");
});

The problem you were probably running into is that if you do next('.yourClass') no elements will be returned if the very next sibling isn't the one with .youClass


it's really simple - just don't use next() but nextAll()

<script type="text/javascript">
  $(document).ready(function(){
    $(".open_list").hide();
    $(".trigger").click(function(){
      $(this).toggleClass("active").nextAll('.yourClass').slideToggle("800");
    });
  });
</script>

If you want to select just one element, append ".eq(0)" after the .nextAll() function.

Hope I helped you. Best regards, Jakub.


Most of the jQuery traversal methods (next, parent, etc.) take an optional selector parameter:

$(this).nextAll('.someclass').first().slideToggle(800);

This code will select siblings of the element that have the class someclass, and perform the slideToggle animation.

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜