javascript - jQuery btn 在激活时关闭 div

Question

我需要 .menu 按钮来关闭 .slides 容器(如果它是由 [name= 之一打开的)切换器] 单选按钮。

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

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

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

.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;
}

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

Answer 1

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

这是代码笔: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();
  });
});

希望这有帮助。