Question

出于某种原因，当我将标签和输入放在div中时，我无法点击它们。这是我的观点。

#menu {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}

#menu > a {
    color:#212121;
    text-align: center;
    width: 100%;
    background-color: darkorange;
    height: 50px;
    margin-bottom: 1px;
    text-decoration: none;
}

#menu > .button > p {
    font-family: 'Roboto'
}

#menu > a:hover {
    background-color: orangered;
}

#menu > a:visited {
    color:#212121;
}

------------------

.show-menu {
    display: flex;

    justify-content: center;
    width: 100%;
    text-align: center;
    
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox]:checked ~ #menu {
    display: flex;
}

.show-menu {
    display: block;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #19c589;
	text-align: center;
	padding: 10px 0;
}

<body>
    
    
    
    <div class="open">
         <label for="show-menu" class="show-menu">Show Menu</label>
        <input type="checkbox" id="show-menu" role="button">
    </div>
        
 
    
    <div id="menu">
        <a href="#"><div class="button"><p>HOME</p></div></a>
        <a href="#"><div class="button"><p>ARTICLES</p></div></a>
        <a href="#"> <div class="button"><p>ADVISORS</p></div></a>
        <a href="#"><div class="button"><p>HELP</p></div></a>
    
    </div>
    
    
    
  
    
</body>

但如果我在.open div之外使用它，它就可以了。我尝试了两个标签和输入，一个在里面，一个在外面，如果我这样做，它们都可以工作。不过，我只是想用一个。

为什么div不允许输入工作？

你能帮助我吗？

谢谢！

Answer 1

您的问题在于此选择器：input[type=checkbox]:checked ~ #menu。查看您的DOM，您会发现#menu 不是复选框的常规兄弟，因为您已在div中嵌套了复选框。 CSS无法遍历DOM树并检查父级的兄弟 - 你想要做的事情：

├── div.open
│   ├── label
│   └── input  // input ~ #menu will not select anything
└── div#menu

当您将<input>元素移出其包装父级时，您将其置于#menu的同一级别，这意味着您的选择器将起作用;）即使此解决方案可能看起来很奇怪，但由于你的复选框是永久隐藏的，所以它在哪个级别，以及它位于你的DOM树中的位置无关紧要。

├── div.open
│   └── label
├──  input      // input ~ #menu or input + #menu will work ;)
└── div#menu

#menu {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#menu>a {
  color: #212121;
  text-align: center;
  width: 100%;
  background-color: darkorange;
  height: 50px;
  margin-bottom: 1px;
  text-decoration: none;
}

#menu>.button>p {
  font-family: 'Roboto'
}

#menu>a:hover {
  background-color: orangered;
}

#menu>a:visited {
  color: #212121;
}

------------------ .show-menu {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked~#menu {
  display: flex;
}

.show-menu {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
}

<div class="open">
  <label for="show-menu" class="show-menu">Show Menu</label>
</div>

<input type="checkbox" id="show-menu" role="button" />

<div id="menu">
  <a href="#">
    <div class="button">
      <p>HOME</p>
    </div>
  </a>
  <a href="#">
    <div class="button">
      <p>ARTICLES</p>
    </div>
  </a>
  <a href="#">
    <div class="button">
      <p>ADVISORS</p>
    </div>
  </a>
  <a href="#">
    <div class="button">
      <p>HELP</p>
    </div>
  </a>

</div>

另一个解决方案是删除标签+输入元素周围的包裹<div>：

├── label
├── input       // input ~ #menu or input + #menu will work ;)
└── div#menu

#menu {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#menu>a {
  color: #212121;
  text-align: center;
  width: 100%;
  background-color: darkorange;
  height: 50px;
  margin-bottom: 1px;
  text-decoration: none;
}

#menu>.button>p {
  font-family: 'Roboto'
}

#menu>a:hover {
  background-color: orangered;
}

#menu>a:visited {
  color: #212121;
}

------------------ .show-menu {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked~#menu {
  display: flex;
}

.show-menu {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
}

<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button" />

<div id="menu">
  <a href="#">
    <div class="button">
      <p>HOME</p>
    </div>
  </a>
  <a href="#">
    <div class="button">
      <p>ARTICLES</p>
    </div>
  </a>
  <a href="#">
    <div class="button">
      <p>ADVISORS</p>
    </div>
  </a>
  <a href="#">
    <div class="button">
      <p>HELP</p>
    </div>
  </a>

</div>

注意：如果您想要接受基于JS的解决方案，那么您可以更自由地编写DOM :)

Answer 2

正在检查中。只是不要隐藏复选框以查看它是否有效。问题是，当你把它放入div时，以下代码不起作用：

input[type=checkbox]:checked ~ #menu {
    display: flex;
}

这是因为~选择器选择了元素的后续兄弟，而不是父母的兄弟姐妹。为了使代码只使用CSS＆amp; HTML，你要么不能把输入＆amp;标记在一起，或者您也可以将#menu移动到.open div中。

有关详细信息，请参阅here，此处查看example。

无法点击div

2 个答案: