Question

我有一个必须显示的父类：单击按钮时无。但是，我需要显示一个位于父类内部的div。

代码如下：

<div class="main-wrapper">
     <div class="navbar">header</div>
     <div class="title">title</div>
     <div class="data-wrapper">
         <div>data1</div>
         <div>data2</div>
         <div><button>Click</button></div>
     </div>
</div>

当我单击数据包装器中的按钮时，我想隐藏主包装器的其他内容，只显示数据包装器。

注意：数据包装器必须位于主包装器内部。不能将其移出主包装器

Answer 1

向您要保持可见的div添加一个ID，并将所有其他ID隐藏在父级中。

function hide(){
  $(".main-wrapper").children().each(function(){
    if ($(this).attr('id') != "keepVisible"){
      $(this).css("display","none");
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
     <div class="navbar">header</div>
     <div class="title">title</div>
     <div id="keepVisible" class="data-wrapper">
         <div>data1</div>
         <div>data2</div>
         <div><button onClick="hide()">Click</button></div>
     </div>
</div>

Answer 2

非常高效的查询，仅选择正确的元素希望这对您有帮助

function hide(){
    $(".main-wrapper *:not(#keepVisible)").css("display","none");
}

隐藏父类并在父类中显示一个类

2 个答案: