Question

我有一个标题，在移动视图中，我想隐藏除搜索表单以外的所有内容，它是孩子。最初，搜索表单是隐藏的，但是当单击某个表单时，会将修饰符类添加到标题中以实现此目的。我尝试使用:not和通用选择器的组合，但是我认为其中一个优先于另一个。表单本身带有，但由于我使用的是通用选择器，因此它同时隐藏了表单的子级。这是一个例子。

const header = document.getElementById('header');
const button = document.getElementById('header-search-button');

button.addEventListener('click', function() {
  header.classList.add('header--search-mode');
});

html,
body {
  margin: 0;
  padding: 0;
}

#header {
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

#header-search-form {
  display: none;
}

#header.header--search-mode *:not(#header-search-form) {
  display: none;
}

#header.header--search-mode #header-search-form {
  display: block;
}

<header id="header">
  <span>Home</span>
  
  <form id="header-search-form">
    <input type="text" />
  </form>
  
  <button id="header-search-button">Show Search Form</button>
</header>

要使这项工作有效，我需要从CSS方面进行哪些更改？从学习的角度来看，理想的情况是，看看我是否仍然可以使用:not做到这一点很酷，但是如果那不是我可以接受的更好的主意。

隐藏除了一个孩子之外的所有孩子及其后代

0 个答案: