Question

我尝试在同一个动作中更改类，这个切换效果非常适合自己。（我有很多具有相同类的块）

$(".w_content").hide();
$(".w_target").click(function()
{
$(this).parent().next('.w_content').toggle();
});

如果我添加此代码：

$(".w_content").hide();
$(".w_target").click(function()
{
$(this).parent().next('.w_content').toggle();
 $(".toggle").toggleClass("oN oFF");
});

它适用于第一个元素。在下一个它再次添加第一个类，依此类推。

如何将此仅附加到当前的toogle功能。

html看起来像这样：

<div id="somewhereBar" class="toggle oFF">

<div class="sharepost">
<div class="w_target"><a class="abc"></a></div>
</div>
<div id="abec" class="w_content">
<p id="text-selected" class="">text that should shown/hide</p>
</div>
</div>

<div id="somewhereBar" class="toggle oFF">

<div class="sharepost">
<div class="w_target"><a class="abc"></a></div>
</div>
<div id="abec" class="w_content">
<p id="text-selected" class="">text that should shown/hide</p>
</div>
</div>

oN / oFF类只应更改当前parrent div的高度，以使最后嵌套div的文本可见。

我看到我使用

Answer 1

这里有两个问题：

id可以在页面上使用一次，因此您不能多次使用#somewhereBar
您的id未被正确调用：id=#somewhereBar不正确，您需要添加引号并删除#，如此：id="somewhereBar"

然后你可以使用.closest遍历回容器并切换两个类：

<强> JS

$(".w_content").hide();
$(".w_target").click(function(){
    $(this).parent().closest(".somewhereBar").toggleClass("oN oFF").end().next('.w_content').toggle();
});

FIDDLE

<强>更新

问题在于您没有将id更改为class。正如我所说，你不能在页面上多次使用id。这是你的代码工作但是，你需要改变我上面的代码：

NEW FIDDLE

Answer 2

您正在使用两个ID相同的元素:(删除＃）

<div id="somewhereBar" class="toggle oFF">

Answer 3

我知道这种方式是否正确，但它确实有效。

我在我的代码之前添加了这个

$(this).parent().closest

现在看起来像这样

$(".w_content").hide();
$(".w_target").click(function()
{
$(this).parent().next('.w_content').toggle();
$(this).parent().closest(".toggle").toggleClass("oN oFF");
});

我的家伙帮了我很多忙。抱歉再次编辑代码。我觉得toogle类名现在有点混乱。

jquery toggle / addClass

3 个答案: