是否可以使用 jQuery 访问 div 的所有子项答案

【问题标题】：Is it possible to access all child of a div with jQuery是否可以使用 jQuery 访问 div 的所有子项
【发布时间】：2014-06-08 18:49:32
【问题描述】：

是否可以使用jQuery选择一个div的所有具有指定类的子div？

例如：如果我点击一个 div，它应该用 .content 类（div1，div2，div3）切换点击的 .name div 的所有子项。

html:

<div class="name">
    Name of div 1
    <div class="content">
        Content of div 1
    </div>
    <div class="name">
        Name of div 2
        <div class="content">
            Content of div 2
        </div>

        <div class="name">
            Name of div 3
            <div class="content">
                Content of div 3
            </div>
        </div>
    </div>
</div>

脚本：

$(function() 
{
    $('.name').click(function()
    {
       $(this).children('.content').slideToggle();
    });
});

我试过这个脚本，但它只选择第一级的 div。

【问题讨论】：

那个我也试过了，不过也是只选第一级。
如果你点击div2（2and3 .content 打开）然后你决定点击DIV1 ....会发生什么？（我认为你的问题比你一开始想的要复杂得多）

标签： javascript jquery html

【解决方案1】：

首先让我解释一个问题，结果是你想要做什么

如果您决定点击 DIV 2，CONTENT 2 和 3 应该会打开，
但是如果你点击DIV 1，就会发生一团糟：

DIV 1 将打开，但所有其他将关闭。

EXAMPLE WITH ISSUE (PRESENT IN OTHER ANSWERS)

为了防止这种情况
您应该将是否被点击状态直接存储到点击的DIV中

WORKING EXAMPLE

$('.name').click(function(ev){
  ev.stopPropagation();
  var io = this.io ^= 1; // Toggle 1/0 state
  $('.content', this)[io?"slideDown":"slideUp"](function(){
    $(this).closest('.name')[0].io = io; // Store state also to all other
  });
});

ev.stopPropagation(); 防止点击向上导航 DOM 触发非目标元素（具有相同的类名）上的相同功能
var io = this.io ^= 1; 使用 XOR ^ 按位运算符将 1/0 值（后来用作布尔值）直接切换到元素 Object 自定义 io（或随意命名）属性（或随意命名）。李>
我们所做的是：通过使用 条件运算符 (?:)，我们使用切换的 this.io 值 1 或 0 作为布尔值，如果值为 1 (true) 做一个slideDown 否则，逻辑上为每个$('.content', this) 一个slideUp（.content，this 的孩子）
如果我们没有为幻灯片使用额外的回调函数，您可能会遇到需要双击某些DIV 元素的问题，因为该特定元素的io 值不是最新的它是状态，所以要更改它，我们只需为每个滑动元素设置相同的 io 状态到 .name（切换器）（.closest()）父级。

【讨论】：

感谢您的帮助！我可以再问你一个问题吗？我已将 .name div 重命名为 .newLevel 并将 div 的名称放入 .name div。如果我单击将所有子 .content div 和所有子 .newLevel div 向上滑动的 div 的名称，我希望这样，但在下一次单击时，它应该只在第一级向下滑动 .content 和 .newLevel div。因此，在我单击它的直接父 div 名称之前，应该隐藏更多级别的子 .content div。请帮帮我好吗？
是的，但是当我关闭一个关卡时，它也应该关闭它的子关卡。
@Crabman 我对你的解释有点迷茫。请创建一个 jsBin :)

【解决方案2】：

您需要停止传播该事件，以免它在树上冒泡 -

$('.name').click(function(e) {
    e.stopPropagation();
    $(this).find('.content').slideToggle();
});

http://jsfiddle.net/jayblanchard/sSRJ4/

【讨论】：

【解决方案3】：

您的代码有效，但点击是传播。在内部name 内单击也是在外部name 内单击。添加这个：

$('.name').click(function(e)//pass the event
{
   e.stopPropagation(); // prevent the event from bubbling.
   $(this).children('.content').slideToggle();
});

另外，您正在使用.children，它仅针对直接子级。如果您想要所有个孩子（后代），请使用.find()。

【讨论】：