Question

我需要.menu按钮关闭 .slides容器，如果它是由[name=toggler]单选按钮之一打开的话。

因此，如果.slide的状态为show且点击了.menu按钮，则隐藏.slides。

.slides只能通过[name=toggler]单选按钮打开，但只需点击.menu按钮即可隐藏。

＆＃13;

$('.menu-btn').click(function() {
  $(".menu").toggle("slide");
});
$(function() {
  $("[name=toggler]").click(function() {
    $('.slide').hide();
    $("#blk-" + $(this).val()).show();
  });
});

＆＃13;

.flex,
.btn-wrap {
  display: flex;
}

.menu,
.slide {
  display: none;
}

.btn,
.menu-btn {
  padding: 20px;
  border: 1px solid silver;
  cursor: pointer
}

.slide {
  height: 50px;
  width: 50px;
  border: 1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <a href="#" class="menu-btn">Menu</a>
  <div class="menu">
    <div class="btn-wrap">
      <label class="btn"><input type="radio" name="toggler" value="1"/>Slide 1</label>
      <label class="btn"><input type="radio" name="toggler" value="2"/>Slide 2</label>
    </div>
  </div>
</div>
<div class="slides">
  <div class="slide" id="blk-1">
    Slide 1
  </div>
  <div class="slide" id="blk-2">
    Slide 2
  </div>
</div>

＆＃13;

Answer 1

只需对.menu-btn点击进行检查，无论.slide div是否可见。如果可见隐藏它也取消选中单选按钮。

以下是codepen：https://codepen.io/johnsackson/pen/NMNmyb

$(".menu-btn").click(function() {
  $(".menu").toggle("slide");
  if($(".slide").is(":visible")) {
    $(".slide").hide();
    $("[name=toggler]").prop("checked", false);
  }
});
$(function() {
  $("[name=toggler]").click(function() {
    $(".slide").hide();
    $("#blk-" + $(this).val()).show();
  });
});

希望这有帮助。

如果激活，jQuery btn关闭div

1 个答案: