基于jQuery实现.menu按钮关闭由[name=toggler]单选框激活的.slides容器

Got it, let's tweak your code to perfectly match your needs—making sure the slide containers only open via the [name=toggler] radio buttons and only close via the .menu-btn.

Here's the adjusted code: #

// Handle menu button click: Hide the currently visible slide container
$('.menu-btn').click(function() {
  // Target only the visible slide container and hide it
  $('.slide:visible').hide();
  // Optional: Uncheck the corresponding radio button to keep state consistent
  $('[name=toggler]:checked').prop('checked', false);
});

// Handle radio button click: Show the selected slide container (hide others first)
$(function() {
  $("[name=toggler]").click(function() {
    $('.slide').hide();
    $("#blk-" + $(this).val()).show();
  });
});

Key adjustments explained: #

• Menu button behavior: Removed the toggle method (which could accidentally open a slide) and instead explicitly target the visible .slide element to hide it. This ensures only the menu button can trigger the hide action.
• State consistency: Added a line to uncheck the selected radio button when hiding the slide. This keeps the radio button state in sync with the slide's visibility—no more checked radio buttons pointing to a hidden slide!
• Radio button behavior: Kept your core logic but confirmed it enforces that only radio buttons can open slides (since clicking a radio button will always hide all slides first, then show the matching one).

Quick note if your container class is .slides instead of .slide: #

If your actual container uses the class .slides (matching your requirement description), just update the selectors in the code:

$('.menu-btn').click(function() {
  $('.slides:visible').hide();
  $('[name=toggler]:checked').prop('checked', false);
});

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

内容的提问来源于stack exchange，提问作者Kyle Underhill