代码之家 › 专栏 › 技术社区 › Kyle Underhill

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

jquery javascript

Kyle Underhill · 技术社区 · 7 年前

我想能够 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>

2 回复 | 直到 7 年前

charlietfl 7 年前

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

Shiladitya 7 年前

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