Question

我试图隐藏/显示div＆＃34; gametype＆＃34;但如果输入复选框位于列表项中，则以下代码不会运行，我不明白为什么

是否可以禁用＆＃34; pc＆＃34;和＆＃34; xbox＆＃34;输入＆＃34; no-game＆＃34;不使用js输入？

＆＃13;

input[type = checkbox]# no - game: checked~#gametype {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <section>
    <h3>Worauf spielst du:</h3>
    <ul>
      <li>
        <input id="PC" name="PC" type="checkbox">
        <label for="PC" class="side-label">PC</label>
      </li>
      <li>
        <input id="Xbox" name="Xbox" type="checkbox">
        <label for="Xbox" class="side-label">Xbox</label>
      </li>
      <li>
        <input id="no-game" name="no-game" type="checkbox" checked>
        <label for="no-game" class="side-label">nichts</label>
      </li>
      <div id="gametype" class="gametype">
        <h3>Was spielst du:</h3>
        <li>
          <input id="MMO" name="MMO" type="checkbox">
          <label for="MMO" class="side-label">MMO</label>
        </li>
        <li>
          <input id="RPG" name="RPG" type="checkbox">
          <label for="RPG" class="side-label">RPG</label>
        </li>
        <li>
          <input id="Shooter" name="Shooter" type="checkbox">
          <label for="Shooter" class="side-label">Shooter</label>
        </li>
      </div>
    </ul>
  </section>
</div>

＆＃13;

Answer 1

你的选择器错了。它应该是：

messages.forEach(x => x.delete())

Answer 2

这种情况正在发生，因为~选择器只匹配其兄弟姐妹要以纯粹的CSS方式进行，我建议将gametype元素作为输入的兄弟元素

input[type=checkbox]#no-game:checked ~ #gametype {
  display: none;
}

<div class="container">
  <section>
    <h3>Worauf spielst du:</h3> 
    
           
            <input id="PC" name="PC" type="checkbox">
            <label for="PC" class="side-label">PC</label>
       
            <input id="Xbox" name="Xbox" type="checkbox">
            <label for="Xbox" class="side-label">Xbox</label>
            
            
             <input id="no-game" name="no-game" type="checkbox" checked>
            <label for="no-game" class="side-label">nichts</label>
            
     
            
    
        <div id="gametype" class="gametype">
            <h3>Was spielst du:</h3> 
                <li> 
                    <input id="MMO" name="MMO" type="checkbox">
                    <label for="MMO" class="side-label">MMO</label>
                </li>
                <li> 
                    <input id="RPG" name="RPG" type="checkbox">
                    <label for="RPG" class="side-label">RPG</label>
                </li>
                <li>  
                    <input id="Shooter" name="Shooter" type="checkbox">
                    <label for="Shooter" class="side-label">Shooter</label>
                </li>
        </div>

  </section>
</div>

Answer 3

实际上你错过了复选框文字的双引号

input[type="checkbox"]#no-game:checked ~ #gametype  {
    display: none;
}

复选框隐藏哈克

3 个答案: