复选框菜单切换 [英] Checkbox Menu Toggle

问题描述

如果选中checkbox1，其他人都不应该。
如果checkbox2被选中，其他的都不应该是。

听起来很简单吧？好吧，我的问题在这里是我想也能切换单个菜单，我有麻烦把它弄出来。

如果任何人都可以帮助它会很大赞赏。

< pre（click，function（）{$（this）.toggleClass（active）。 ）}）

  .d1，.d2，.d3 { display：none;}＃d1：checked〜.d1 {display：block;}＃d2：checked〜.d2 {display：block;}＃d3：checked〜.d3 {display：block;} active {color： 6d4dfe;}  

 < script src =https： /ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script> ;<input type =checkboxname =menubarid =d1> < label for =d1>开启1< / label>< input type =checkboxname =menubarid =d2>< label for =d2> label>< / input>< input type =checkboxname =menubarid =d3>< label for =d3> div class =hi> Lorem ipsum dolor。< / div>< / div>< div class =d2> Lorem ipsum dolor sit amet。< / div>< div class = < / div>  
 

解决方案

假设你有一些理由喜欢复选框的收音机，我相信这将做你想要的：

div class =snippetdata-lang =jsdata-hide =false>

  $（input：checkbox）。on（change，function（）{$（this）.toggleClass（active）; $（input：checkbox）。not（this）.removeClass（active）。prop（'checked'，false）;}）   < script src =https://ajax.googleapis.com/ajax/libs/ jquery/2.1.1/jquery.min。 js>< / script>< input type =checkboxname =menubarid =d1>< label for =d1>打开1< / label& checkboxname =menubarid =d2>< label for =d2>打开2< / label>< input type =checkboxname =menubarid =d3> ;< label for =d3>开启3< / label>< div class =d1>< div class =hi> Lorem ipsum dolor。< / div>< / div ;< div class =d2> Lorem ipsum dolor sit amet。< / div>< div class =d3> Lorem ipsum dolor sit amet，consectetur adipisicing。< / div>  

If checkbox1 is checked none of the others should be. If checkbox2 is checked none of the others should be.

Sounds simple right? Well my problem here is I want to be able to also toggle a single menu and I'm having trouble figuring it out.

If anyone can help it'd be greatly appreciated.

$("label").on("click", function() {
  $(this).toggleClass("active")
})

.d1, .d2, .d3 {
  display: none;
}

#d1:checked ~ .d1 {
  display: block;
}
#d2:checked ~ .d2 {
  display: block;
}
#d3:checked ~ .d3 {
  display: block;
}

.active {
  color: #6d4dfe;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="menubar" id="d1">
<label for="d1">Open 1</label>
<input type="checkbox" name="menubar" id="d2">
<label for="d2">Open 2</label>
<input type="checkbox" name="menubar" id="d3">
<label for="d3">Open 3</label>

<div class="d1"><div class="hi">Lorem ipsum dolor.</div></div>
<div class="d2">Lorem ipsum dolor sit amet.</div>
<div class="d3">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>

解决方案

Assuming you have some reason to prefer checkboxes to radios, I believe this will do what you want:

$("input:checkbox").on("change", function() {
  $(this).toggleClass("active");
  $("input:checkbox").not(this).removeClass("active").prop('checked', false);
})

.d1, .d2, .d3 {
  display: none;
}

#d1:checked ~ .d1 {
  display: block;
}
#d2:checked ~ .d2 {
  display: block;
}
#d3:checked ~ .d3 {
  display: block;
}

.active {
  color: #6d4dfe;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="menubar" id="d1">
<label for="d1">Open 1</label>
<input type="checkbox" name="menubar" id="d2">
<label for="d2">Open 2</label>
<input type="checkbox" name="menubar" id="d3">
<label for="d3">Open 3</label>

<div class="d1"><div class="hi">Lorem ipsum dolor.</div></div>
<div class="d2">Lorem ipsum dolor sit amet.</div>
<div class="d3">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>

这篇关于复选框菜单切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！