javascript - 复选框菜单切换

Question

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

听起来很简单吧？好吧，我的问题是我还希望能够切换单个菜单，但我无法弄清楚它。

$("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>

Answer 1

假设您有某种理由更喜欢复选框而不是单选按钮，我相信这会满足您的要求:

$("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>