Question

我已经查看了相关问题，但我找不到合适的组合来完成这项工作。

我试图在另一个div中隐藏/显示div。每页有20个这样的包装div。

<div class="wrapper">
    <div class="date"></div>
    <div class="subject"></div>
    <div class="who"></div>
    <div class="body"></div>
</div>

我正在尝试显示class =“body”div，它设置为display：none;在css。

我尝试过使用jQuery toggle（），toggleClass（）函数但没有成功。

这是我到目前为止所得到的。

$('.wrapper').click(function () {
    $('.body').toggle();
});

我知道这是一段非常小的代码，遗憾的是我刚开始学习jQuery而不知道如何从这里开始。

Answer 1

您是否尝试将其置于onready功能中？像这样：

$(function () {
  $('.wrapper').click(function () {
    $('.body').toggle();
  });
});

将它放在此函数中可确保它在文档完全加载后运行...否则它会尝试将单击处理程序附加到尚未加载的元素（因此不存在）

Answer 2

查看我的JSFiddle（http://jsfiddle.net/XGsVE/3/）。此代码将切换单击的WRAPPER的BODY div。抛出$(this)会导致所有BODY div切换，尽管它们都在包装。

$('.wrapper').click(function () {
    $(this).find('div.body').toggle();
});

Answer 3

如果您希望能够再次隐藏它，我认为您需要选择要从另一个类切换的内容。当您再次点击body时，切换div课程会将其从wrapper母猪中删除，它将无法选择。

<div class="wrapper">
    W
    <div class="date">d</div>
    <div class="subject">s</div>
    <div class="who">w</div>
    <div class="body isbody">b</div>
</div>

和javascript：

$('.wrapper').click(function () {
    $(this).children('.isbody').toggleClass('body');
});

http://jsfiddle.net/vuBNd/

jQuery独立切换其他div中的多个div

3 个答案: