Question

我想隐藏一个完整的div容器，除了一个div。

因此，在启动时只显示div id“box_5”并隐藏其余部分。当我点击按钮1显示所有内容时，当我点击按钮2再次隐藏所有内容时。

问题是，当我隐藏“包装”div时，它隐藏了所有内容。 ID = box_5。

我认为问题是div在包装div中但我不知道解决方法吗？

<button id="button_1">show</botton>
<button id="button_2">hide</botton>

<div id="wrapper">
<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>
<div id="box_4"></div>
<div id="box_5">always show this</div>
<div id="box_6"></div>
<div id="box_7"></div>
<div id="box_8"></div>
<div id="box_9"></div>
<div id="box_10"></div>
</div>




$(document).ready(function() {
    $('#wrapper').not(":eq(#box_5)").hide();
    $('id="button_1"').click(function() {
        $('#wrapper').show();
        $('id="button_2"').click(function() {
            $('#wrapper').not(":eq(#box_5)").hide();
        });

    });

Answer 1

更改

$('#wrapper').not(":eq(#box_5)").hide();

到

$('#wrapper').not("#box_5").hide();

注意：删除了eq选择器。 eq选择器适用于索引，在您的情况下，您不需要eq选择器，因为您知道div的ID。

另外请更改您的处理程序功能，如下所示

$('#button_1').click(function() {
    $('#wrapper').show();
});

$('#button_2').click(function() {
    $('#wrapper').not("#box_5").hide();
});

Answer 2

将要隐藏的元素添加到选择器，在本例中为“wrapper”元素内的“div”元素。另外，修复了选择器的一些其他格式。

    $('#wrapper div').not("#box_5").hide();
    $("#button_1").click(function() {
        $('#wrapper div').show();
    });
    $("#button_2").click(function() {
        $('#wrapper div').not("#box_5").hide();
    });

隐藏除一个之外的所有div

2 个答案: