JQuery Btn, чтобы закрыть div, если активен - PullRequest
Новая
       7

JQuery Btn, чтобы закрыть div, если активен

0 голосов
/ 25 апреля 2018

Мне нужна кнопка .menu, чтобы закрыть контейнер .slides, если он был открыт с помощью одной из радиокнопок [name=toggler].

Таким образом, если состояние .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>

1 Ответ

0 голосов
/ 25 апреля 2018

Просто нажмите .menu-btn, чтобы проверить, является ли элемент .slide видимым или нет. Если видно скрыть, то также снимите флажок.

Вот кодовая ручка: 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();
  });
});

Надеюсь, это поможет.

...