Флажок, открывающий другой div при нажатии - PullRequest
Новая
       24

Флажок, открывающий другой div при нажатии

0 голосов
/ 11 февраля 2020

У меня есть два флажка, которые при нажатии я хочу показать еще 3 флажка. Я сделал это, скрыв div в HTML, а затем используя css для отображения div при нажатии (код прилагается).

По какой-то причине, всякий раз, когда я нажимаю первый флажок (snapshot_checkbox), флажки подопций открываются как для второго, так и для этого флажка (второй флажок tmd_checkbox. Как это предотвратить? Я хочу, чтобы они оба открывали только свои соответствующие подопции, а не друг друга а также. Я надеюсь, что это имеет смысл. 

ul input:checked~#snapshot_suboptions {
  display: inline;
}

ul input:checked~#tmd_suboptions {
  display: inline;
}
<div class="selectproduct">
  <h1>3. Select Product</h1>
  <ul>
    <li>
      <input type="checkbox" class="product" name="snapshot" value="0.09" id="snapshot_checkbox" onclick="SnapshotFunction()">Snapshot (Targetoo)<br>
      <div id="snapshot_suboptions" class="hidden">
        <ul>
          <li><input type="checkbox" name="banner" value="0.08" id="snapshot_banner_checkbox">Banner<br></li>
          <li><input type="checkbox" name="video" value="0.08" id="snapshot_video_checkbox">Video<br></li>
          <li><input type="checkbox" name="richmedia" value="0.08" id="snapshot_richmedia_checkbox">Rich Media<br></li>
        </ul>
      </div>
      <input type="checkbox" class="product" name="targetedmobiledisplay" value="0.08" id="tmd_checkbox"> Targeted Mobile Display<br>
      <div id="tmd_suboptions" class="hidden">
        <ul>
          <li><input type="checkbox" name="banner" value="0.08" id="tmd_banner_checkbox">Banner<br></li>
          <li><input type="checkbox" name="video" value="0.08" id="tmd_video_checkbox">Video<br></li>
          <li><input type="checkbox" name="richmedia" value="0.08" id="tmd_richmedia_checkbox">Rich Media<br></li>
          <br>
        </ul>
      </div>
      <input type="checkbox" class="product" name="push" id="push_checkbox" value="0.07">Push (ZeroPark)<br>
      <input type="checkbox" class="product" name="behaviouralpush" id="behaviouralpush_checkbox" value="0.07">Behavioural Push (Airpush)<br>
      <input type="checkbox" class="product" name="mobileoverlay" id="mobileoverlay_checkbox" value="0.06">Mobile Overlay<br>
      <input type="checkbox" class="product" name="landingpage" value="0.08">Landing Page<br>
      <input type="checkbox" class="product" name="video" value="0.07" id="video_checkbox">Video<br>
      <p id="video_text" style="display:none">Video will be sold on a CPCV (Cost per Completed View) basis, NOT CPC. This is the industry standard for video advertising.</p>
    </li>
  </ul>
</div>

Ответы [ 2 ]

2 голосов
/ 11 февраля 2020

Вам необходимо указать указанный c идентификатор входа в вашем CSS. Пожалуйста, попробуйте ниже 

ul input#snapshot_checkbox:checked~#snapshot_suboptions {
  display: inline;
}

ul input#tmd_checkbox:checked~#tmd_suboptions {
  display: inline;
}
0 голосов
/ 11 февраля 2020

Вы можете выбрать идентификатор входа: 

#snapshot_checkbox:checked~#snapshot_suboptions {
  display: inline;
}

#tmd_checkbox:checked~#tmd_suboptions {
  display: inline;
}
...