Question

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

我正在做一个带有一些hide div的列表，我做了这个jquery函数。问题是，当你点击触发链接时，这个函数会显示出open_list后面的div。

我正在寻找另一个允许我使用相同内容的函数，但是它会激活跟随.open_list的div，但是会有一个确定的类。

因此它将忽略open_list后面没有该类的div。

我一直在做这一整天，我找不到正确的方法来做到这一点。有谁知道吗？

所以我把脚本：

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

}）;

但仍然不行。当div打开时，我需要h1根本不移动。

Answer 1

您可以使用由您的选择器过滤的nextAll()，然后获取该列表的first()元素：

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

您可能遇到的问题是，如果您执行next('.yourClass')，如果下一个兄弟不是具有.youClass

的兄弟，则不会返回任何元素

Answer 2

大多数jQuery遍历方法（next，parent等）采用可选的选择器参数：

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

此代码将选择具有类someclass的元素的兄弟，并执行slideToggle动画。

Answer 3

它非常简单 - 只是不要使用next（）而是使用nextAll（）

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

如果您只想选择一个元素，请在.nextAll（）函数后附加“.eq（0）”。

希望我帮助过你。最好的问候，Jakub。

如何更改此Jquery功能（切换）

3 个答案: