Question

我遇到slideToggle()的问题。我有一个动态生成的表，其中包含此HTML：

<div class="Click">Click to see more info</div>
<div class="Panel">Some information...</div>

当“点击”和“面板”按此顺序排列并且彼此相邻时，slideToggle()正常工作。但是，当我将div .Click移动到文档的任何其他部分时，切换将停止工作。我不确定jQuery代码的$(this).next()部分是否与它有关。

$(document).ready(function(){
    $(".Click").click(function(){
        $(this).next(".Panel").slideToggle("fast");

    });
});

任何帮助将不胜感激！

Answer 1

如果可以，我建议您为元素添加id属性。您还可以使用data属性创建关系。

<强> HTML

<div id="btn-1" data-rel="panel-1" class="Click">Click to see more info</div>
<div id="panel-1" class="Panel">Some information...</div>

通过这种方式，单击的元素可以位于文档中的任何位置。

<强>的jQuery

$(function(){
  $(".Click").click(function(){
    $("#" + $(this).data("rel")).slideToggle("fast");
  });
});

这会定位#panel-1并对其执行.slideToggle()。如果您有多个按钮和面板，那么您只需将它们的关系嵌套到每个按钮和面板上，只要它们都具有相同的类，这一切都会起作用。

Answer 2

在你的情况下，next（）选择下一个元素，你可以使用以下代码

$(document).ready(function(){
    $(".Click").click(function(){
        $(this).siblings(".Panel").eq(0).slideToggle("fast");

    });
});

选择带有.panel类的兄弟姐妹，我添加了eq（0），它将选择限制在具有点击类的div之后具有类面板的第一个兄弟。

	$(document).ready(function(){
		$(".Click").click(function(){
			$(this).siblings(".Panel").eq(0).slideToggle("fast");

		});
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Click">Click to see more info</div>
<div class="next">sample</div>
<div class="next">sample</div>
<div class="Panel">Some information...panel 1</div>
<div class="Panel">Some information... panel 2</div>

希望这有帮助！：）

当Click和Panel div不在彼此旁边时，slideToggle不起作用

2 个答案: