show/hide div if opened by radio selection

问题

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

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.

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>

回答1:

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

Check here: 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;
  });
});

I hope this is what you are looking for.

回答2:

If I understand correctly, you can use a flag to determine wether or not the menu is open.

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>

来源：https://stackoverflow.com/questions/50051012/show-hide-div-if-opened-by-radio-selection

标签

javascript

jquery

onclick