显示/隐藏div，如果通过无线电选择打开

Question

我让.menu-btn成功切换.menu，但是：

• 第1步：如果选择radio，则.slides div应打开，
• 步骤2：如果.menu-btn div打开时按.slides， .slides容器应关闭。

每个.slide使用下面的代码显示/隐藏广播选择，但我需要能够设置.slides容器的动画以遵循上述步骤。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃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;

＆＃13;

＆＃13;

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>