Javascript 如果通过收音机选择打开，则显示/隐藏div

我的

.menu btn

已成功切换

.menu

，但是：

• 步骤1：如果选择了

  收音机

  ，则

  幻灯片

  div应打开
• 步骤2：如果在

  .slides

  div打开时按下

  .menu btn

  ，

  .slides

  容器应关闭

每个

.slides

都使用下面的代码显示/隐藏收音机选择，但我需要能够为

.slides

容器设置动画，以遵循上面的步骤

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

$（“.menu btn”）。单击（函数（）{
$（“.menu”）.animate({
宽度：“切换”，
ease:“easeOutExpo”
}, 250);
});
$（函数（）{
$（“[name=toggler]”。单击（函数（）{
$（“.slide”）.hide（）；
$（“#blk-”+$（this.val（））.show（）；
});
});
菜单，
.幻灯片{
显示：无；
}
弯曲
.btn包裹{
显示器：flex；
}
.菜单{
高度：50px；
}
.btn，
.菜单btn{
填充：20px；
边框：1px纯银；
光标：指针
}
.幻灯片{
边框：2倍纯绿；
}
.幻灯片{
高度：50px；
宽度：50px；
边框：1px实心；
}

幻灯片1
幻灯片2
幻灯片1
幻灯片2
如果我理解正确，您可以使用一个标志来确定菜单是否打开


var菜单_open=false；
$（“.menu btn”）。单击（函数（）{
$（“.menu”）.animate({
宽度：“切换”，
ease:“easeOutExpo”
}, 250);
如果（菜单打开）{
$（“.slide”）.hide（）；
}
});
$（函数（）{
$（“[name=toggler]”。单击（函数（）{
$（“.slide”）.hide（）；
$（“#blk-”+$（this.val（））.show（）；
菜单_open=true；
});
});
菜单，
.幻灯片{
显示：无；
}
弯曲
.btn包裹{
显示器：flex；
}
.菜单{
高度：50px；
}
.btn，
.菜单btn{
填充：20px；
边框：1px纯银；
光标：指针
}
.幻灯片{
边框：2倍纯绿；
}
.幻灯片{
高度：50px；
宽度：50px；
边框：1px实心；
}

幻灯片1
幻灯片2
幻灯片1
幻灯片2
您可能必须将操作保存在变量/对象中

请点击此处：

我希望这就是您要找的。
我仍然需要打开
.slides
容器，并在再次按下
.menu btn
时显示上次选定收音机的
.slide
。当再次按下
菜单btn
时，您的代码使单选按钮保持选中状态，但不显示幻灯片，
.slides
容器保持关闭状态。正确，如果选择了其中一个单选按钮，您需要做一些方便的工作来重新显示所选幻灯片。如果在页面加载时选择了其中一个，则最好执行此检查。这可能会起作用。每次单击
.btn
菜单时，我仍然需要切换
.slides
容器。这很有效。再次感谢。在每个活动的
.slide
上，是否有一个调整来代替显示/隐藏
显示：block
，
.slides
容器像slideToggle一样设置打开/关闭动画<代码>.slides
仅在幻灯片处于活动状态时才会设置动画
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;
  });
});