показать / скрыть div, если открыт по радио

Question

У меня есть .menu-btn, успешно переключающий .menu, но:

• Шаг 1: Если выбран radio, .slides div должен открыть ,
• Шаг 2: Если нажата .menu-btn, когда открыт .slides, .slides контейнер должен закрыть .

Каждый .slide показывает / скрывает выбор радиостанции с помощью приведенного ниже кода, но мне нужно иметь возможность анимировать контейнер .slides, чтобы выполнить действия, описанные выше.

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

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

.menu,
.slide {
  display: none;
}

.flex,
.btn-wrap {
  display: flex;
}

.menu {
  height: 50px;
}

.btn,
.menu-btn {
  padding: 20px;
  border: 1px solid silver;
  cursor: pointer
}

.slides {
  border: 2px solid green;
}

.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

Возможно, вам придется сохранить ваши действия в переменной / объекте.

Проверьте здесь: https://codepen.io/johnsackson/pen/RyGdRp

var slideDetail = {
  isRadioGroupOpen: false,
  isSlideOpen: false,
  value: ""
};

$(".menu-btn").click(function() {
  $(".menu").toggle("slide");
  if(slideDetail.isRadioGroupOpen) {
    $(".slide").hide();
  } else if(slideDetail.value!=="") {
    $(slideDetail.value).show();
  }
  slideDetail.isRadioGroupOpen = !slideDetail.isRadioGroupOpen
});

$(function() {
  $("[name=toggler]").click(function() {
    $(".slide").hide();
    var value = "#blk-" + $(this).val();
    $(value).show();
    slideDetail.isSlideOpen = !slideDetail.isSlideOpen;
    slideDetail.value = value;
  });
});

Надеюсь, это то, что вы ищете.

Answer 2

Если я правильно понимаю, вы можете использовать флаг, чтобы определить, открыто ли меню.

var menu_open = false;
$(".menu-btn").click(function() {
    $(".menu").animate({
        width: 'toggle',
        ease: 'easeOutExpo'
      }, 250);
    if ( menu_open ) {
      $(".slide").hide();
    }
});
$(function() {
  $("[name=toggler]").click(function() {
    $(".slide").hide();
    $("#blk-" + $(this).val()).show();
    menu_open = true;
  });
});

.menu,
.slide {
  display: none;
}

.flex,
.btn-wrap {
  display: flex;
}

.menu {
  height: 50px;
}

.btn,
.menu-btn {
  padding: 20px;
  border: 1px solid silver;
  cursor: pointer
}

.slides {
  border: 2px solid green;
}

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