Question

我希望能够通过open / close相应的menu checking / unchecking来checkboxes / $(document).ready(function($) { $('input[name="menus"]').change(function() { const id = $(this).prop("id"); $(".menu").each(function() { $(this).toggleClass("active", $(this).data("id") == id); }); }); });。

选中任何复选框后如何显示菜单？现在，该代码一次只显示一个，而不取决于复选框的选择。

.menus div {
  border: 1px solid;
  height: 30px;
  width: 100px
}

.menu {
  opacity: 0;
  visibility: hidden;
}

.menu.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.first {
  background: blue
}

.second {
  background: green
}

.third {
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
  <label>
<input type="checkbox" name="menus" id="first">First
</label>
  <label>
<input type="checkbox" name="menus" id="second">Second
</label>
  <label>
<input type="checkbox" name="menus" id="third">Third
</label>
</div>
<div class="menus">
  <div class="menu first" data-id="first"></div>
  <div class="menu second " data-id="second"></div>
  <div class="menu third" data-id="third"></div>
</div>

ht[t] + ht[t + 1] + ht[t + 2] + ht[t + 3] + ht[t + 4] + ht[t + 5] <= 1 + 5 * δ[t,1]
ht[t - 1] + ht[t] + ht[t + 1] + ht[t + 2] + ht[t + 3] + ht[t + 4] <= 1 + 5 * δ[t,2]
ht[t - 2] + ht[t - 1] + ht[t] + ht[t + 1] + ht[t + 2] + ht[t + 3] <= 1 + 5 * δ[t,3]
ht[t - 3] + ht[t - 2] + ht[t - 1] + ht[t] + ht[t + 1] + ht[t + 2] <= 1 + 5 * δ[t,4]
ht[t - 4] + ht[t - 3] + ht[t - 2] + ht[t - 1] + ht[t] + ht[t + 1] <= 1 + 5 * δ[t,5]
ht[t - 5] + ht[t - 4] + ht[t - 3] + ht[t - 2] + ht[t - 1] + ht[t] <= 1 + 5 * δ[t,6]
δ[t,1]+δ[t,2]+δ[t,3]+δ[t,4]+δ[t,5]+δ[t,6] <= 5
δ[t,k] ∈ {0,1}

Answer 1

在这里找到解决方案

$(document).ready(function($) {
  $('input[name="menus"]').change(function() {
    const id = $(this).prop("id");
    const checkboxStatus = $(this).is(":checked");
    $(".menu").each(function() {
      if ($(this).data("id") == id) {
        $(this).toggleClass("active", checkboxStatus);
      }
    });
  });
});

.menus div {
  border: 1px solid;
  height: 30px;
  width: 100px
}

.menu {
  opacity: 0;
  visibility: hidden;
}

.menu.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.first {
  background: blue
}

.second {
  background: green
}

.third {
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
  <label>
<input type="checkbox" name="menus" id="first">First
</label>
  <label>
<input type="checkbox" name="menus" id="second">Second
</label>
  <label>
<input type="checkbox" name="menus" id="third">Third
</label>
</div>
<div class="menus">
  <div class="menu first" data-id="first"></div>
  <div class="menu second " data-id="second"></div>
  <div class="menu third" data-id="third"></div>
</div>

Answer 2

可以从id中创建一个属性选择器，并以这种方式切换相应的菜单项，并使其他菜单保持不变

$('input[name="menus"]').change(function() {
  $(".menu[data-id=" + this.id + "]").toggleClass("active", this.checked);
});

.menus div {
  border: 1px solid;
  height: 30px;
  width: 100px
}

.menu {
  opacity: 0;
  visibility: hidden;
}

.menu.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.first {
  background: blue
}

.second {
  background: green
}

.third {
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
  <label>
<input type="checkbox" name="menus" id="first">First
</label>
  <label>
<input type="checkbox" name="menus" id="second">Second
</label>
  <label>
<input type="checkbox" name="menus" id="third">Third
</label>
</div>
<div class="menus">
  <div class="menu first" data-id="first"></div>
  <div class="menu second " data-id="second"></div>
  <div class="menu third" data-id="third"></div>
</div>

jQuery-每个复选框切换其自己的菜单

2 个答案: