显示/隐藏div(如果通过单选打开) [英] show/hide div if opened by radio selection

问题描述

我成功地.menu-btn切换了.menu，但是:

I have the .menu-btn successfully toggling the .menu, but:

• 第1步:如果选择了radio，则.slides div应该打开，
• 第2步:如果在打开.slides div时按下.menu-btn， .slides容器应关闭.

• Step 1: If a radio is selected, the .slides div should open,
• Step 2: If the .menu-btn is pressed when the .slides div is open, the .slides container should close.

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

Each .slide shows/hides with the radio selection using the code below, but I need to be able to animate the .slides container to follow the steps above.

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

推荐答案

您可能必须将操作保存在变量/对象中.

You might have to save your actions in an variables/object.

在此处检查: 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;
  });
});

我希望这是您想要的.

这篇关于显示/隐藏div(如果通过单选打开)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！