Question

我想动态切换div。这是我到目前为止所发现的......

$(".toggle").click(function() { 
$(this).next('.container').toggle('fast'); 
});

我拥有的是这个（HTML）：

<h4 class="toggle">1</h4>
<h4 class="toggle">2</h4>
<h4 class="toggle">3</h4>
<div class="container">Content1</div>
<div class="container">Content2</div>
<div class="container">Content3</div>

当我单击FIRST元素（带有类切换的h4）时，我希望带有类容器的FIRST元素打开/关闭。

当我点击第二个toggle-class时，第二个容器类应该打开。

我的例子中的下一个不起作用。

Answer 1

如果您需要/想要保留此DOM结构，则应使用index。

$('.toggle').click(function() {
    $('.container').eq($(this).index()).toggle('fast');
});

参考：.eq()，.index()

示例：http://www.jsfiddle.net/4yUqL/36/

Answer 2

我认为你在寻找的是

$(".toggle").click(function() { 
    $($('.container')[$(this).index(".toggle")]).toggle('fast'); 
});

工作fiddle

Answer 3

您可以试用toggle feature of JQuery。而且我宁愿在标题和内容div之间有一些其他的依赖关系，而不是信任它们出现的顺序。

Answer 4

如果您更改html的顺序：

<h4 class="toggle">1</h4>
<div class="container">Content1</div>
<h4 class="toggle">2</h4>
<div class="container">Content2</div>
<h4 class="toggle">3</h4>
<div class="container">Content3</div>

你的代码是有效的，因为它只是获取下一个DOM元素并在它与类匹配时切换它。然而，这是非常不稳定的，其他人的例子告诉js更具体地做什么会更好。

jQuery动态切换

4 个答案: