Question

我有这个问题，在HTML中我有这个代码：

<div>
     <div class='category' style="display:block">
        <div> <div onclick="closeOtherCategoryDiv($(this))">Name</div> </div>
        <div class="groups"></div>
    </div>

    <div class='category' style="display:block">
        <div> <div onclick="closeOtherCategoryDiv($(this))">Name</div> </div>
        <div class="groups"></div>
    </div>

    <div class='category' style="display:block">
        <div> <div onclick="closeOtherCategoryDiv($(this))">Name</div> </div>
        <div class="groups"></div>
    </div>
</div>

因此，如果我点击带有函数closeOtherCategoryDiv（$（this））的div，我想为除了点击之外的所有其他div.category设置样式属性display：none。

Answer 1

首先，不要使用内联脚本 - 使用jQuery可以更轻松地选择元素而不需要使用它。

其次，请看一下dom遍历方法：http://api.jquery.com/category/traversing/

9个中的9个，您需要选择的所有内容都可以通过这些方法的组合来完成。

第三，尝试这样的事情：

脚本：

$(function(){
    $('.toggle').click(function(e){
        $('.toggle').not($(this)).hide();
    });
});

HTML：

<div>
         <div class='category' style="display:block">
            <div> <div class='toggle'>Name</div> </div>
            <div class="groups"></div>
        </div>

        <div class='category' style="display:block">
            <div> <div class='toggle'>Name</div> </div>
            <div class="groups"></div>
        </div>

        <div class='category' style="display:block">
            <div> <div class='toggle'>Name</div> </div>
            <div class="groups"></div>
        </div>
    </div>

对于这世界上所有善良和神圣的爱，请删除内联脚本。

Answer 2

尝试：

$('#childDiv').parent().siblings.hide();

Answer 3

function closeOtherCategoryDiv($this) {
 var filter = 'div.category';
 $this.closest(filter).siblings(filter).hide();
}

此外，请考虑通过jQuery的.on而不是内联设置该事件处理程序。

Answer 4

您的HTML稍有变化：

<div class='categories'>
    <div class='category'>
        <div> <div class='name'>Name</div> </div>
        <div class="groups"></div>
    </div>

    <div class='category'>
        <div> <div class='name'>Name</div> </div>
        <div class="groups"></div>
    </div>

    <div class='category'>
        <div> <div class='name'>Name</div> </div>
        <div class="groups"></div>
    </div>
</div>

这应该可以解决问题：

$(document).ready(function() {
    // Handle clicks on elements with class "name" inside container with class "categories"
    $('.categories').on('click', '.name', function(e) {
        // Hide all categories
        $('.category').hide();
        // Show this category
        $(e.target).parents('.category').show();
    });
});

通过使用jQuery的on，并且只指定一个事件处理程序，无论您显示的类别数量如何，这都应该表现良好。

Answer 5

试试这个，

$(function(){
    $('.category').click(function() {
       $('.category').hide();
       $(this).show();
    });
});

希望这有帮助..........

如何用jquery选择父div并关闭所有兄弟姐妹

5 个答案:

脚本：

HTML：