如何在 Jquery 中选择和切换所选元素的子 div 的隐藏答案

【问题标题】：How to select and toggle hide on children divs of selected element in Jquery如何在 Jquery 中选择和切换所选元素的子 div 的隐藏
【发布时间】：2012-11-28 09:30:30
【问题描述】：

我对 Jquery 很陌生，当我尝试在我的程序中选择子 div 时遇到问题。关键是要有一个触发 jquery 函数的按钮。此功能旨在从按钮所在的位置获取所有子 div 并将它们隐藏。这是我的jQuery代码：

$(".button").click(function () {
    $(this).children('div').fadeToggle("fast", function () {
    });
});

我的 html 很简单。一个 div 中的 div 和第二个 div 中的 div 是另外两个 div。

<div class="clients>
    <input type="button" class="button" id="button" value="Hide Sites" autopostback="false"/>
    <div class="websites>
        <div class="urls"></div>
        <div class="data"></div>
    </div>
</div>

但这不起作用。我试过使用 jquery.next 和兄弟姐妹，但也无法让它们工作。 Jquery.closest 向上看，找到了容器 div（客户端），但这也不是我需要的。大伙帮忙？谢谢

【问题讨论】：

标签： html show-hide children jquery

【解决方案1】：

你破坏了 html，closing quote missing 这里是 class="clients 和这里 class="websites 你必须使用 next() 而不是 children()

Live Demo

<div class="clients">
    <input type="button" class="button" id="button" value="Hide Sites" autopostback="false"/>
    <div class="websites">
        <div class="urls">1</div>
        <div class="data">2</div>
    </div>
</div>

$(".button").click(function () {
    $(this).next('div').fadeToggle("fast", function () {
    });
});

【讨论】：

“损坏的 html”是错字，仅适用于该页面。为了你们的利益，我翻译了我的班级名称，忘记了结束引号。我不确定为什么您的示例有效而我的代码无效。我将重新检查所有结束标签...
页面中添加jquery库了吗？
@Adil 是的，添加了库。我重新检查了所有打开和关闭的 div 标签，一切正常。
通过使用 .siblings 并重新排列我的 div 解决了这个问题。感谢您的回答！

【解决方案2】：

试试这个格式

$('.clients').on('click', $('.button'), function(){ });

【讨论】：

不幸的是，这对我也没有帮助。不管怎么说，还是要谢谢你。我只是得到 sme 结果。没有 JS 错误，只是没有任何反应。
通过使用 .siblings 并重新排列我的 div 解决了这个问题。感谢您的回答！

【解决方案3】：

使用 jquery.siblings 解决了这个问题：

$(".button").click(function () {
    $(this).siblings('div').fadeToggle("fast", function () {
    });
});

我以前尝试过兄弟姐妹，但我想我有一个错误，因为现在它可以工作了。谢谢大家！

【讨论】：