Javascript 当我点击返回到第一个开关时，第二个开关应该关闭

我有两个开关。我希望一次只显示一个切换。当我点击第二次切换时，第一次切换应该关闭

Javascript

$('#bar').click(function () {
    $('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
    $('#foo1').slideToggle('slow');
});

HTML

---

我在课堂上做了你想做的事，
手风琴风格

$（'#条，#条1'）。单击（函数（）{
var id='#'+$（this.attr（'data-for'）；
if（$（id）.hasClass（'open'））{
$（id）.toggleClass（'open'）；
}
else if（$（'foo'）.hasClass（'open'）| |$（'foo1'）.hasClass（'open'））{
$（'foo'）。toggleClass（'open'）；
$（'foo1'）。toggleClass（'open'）；
}
否则{
$（id）.toggleClass（'open'）；
}
});
#foo{
宽度：100px；
身高：0；
背景颜色：绿色；
显示：块；
过渡：全部5秒；
}
#foo1{
宽度：100px；
身高：0；
背景颜色：绿色；
显示：块；
过渡：全部5秒；
}
#foo.open，#foo1.open{
高度：100px；
}

酒吧
bar1
您可以使用
类
而不是
id

$('.bar').click(function () {
    $('.foo').hide();            // hide previous elements
    $(this).next().show('slow'); // show next element in the DOM (it will be <div> with class 'foo')
});

$（'.bar'）。单击（函数（）{
$（'.foo'）.hide（）；//隐藏以前的元素
$（this）.next（）.show（'slow'）；//显示DOM中的下一个元素（它将与类'foo'一起）
});

嗨，我有两种方法可以让你实现它

在这种情况下，当第二个div打开时，第一个div向上滑动

$('#bar').click(function () {
 $("div").slideUp("slow");
 $('#foo').slideToggle('slow');    

});
$('#bar1').click(function () {
$("div").slideUp("slow");
$('#foo1').slideToggle('slow');
});


在第二种情况下，我在打开第二个div时隐藏了第一个div

$('#bar').click(function () {
$("div").hide();
$('#foo').slideToggle('slow');    

});
$('#bar1').click(function () {
 $("div").hide();
   $('#foo1').slideToggle('slow');
});


我希望我的回答能帮助您：）
只有一件事，那就是如果我有5个开关，将是什么过程。因为您正在隐藏第一个切换到第二个和第二个切换到第一个。请详细说明这5个开关的数学。我已经添加了更改，感谢您的快速响应，我得到了我需要的。我已经用上面Alexander的例子做了…与您所写的相同。非常感谢您的回复，但已经完成了。保佑你
$('#bar').click(function () {
 $("div").slideUp("slow");
 $('#foo').slideToggle('slow');    

});
$('#bar1').click(function () {
$("div").slideUp("slow");
$('#foo1').slideToggle('slow');
});

$('#bar').click(function () {
$("div").hide();
$('#foo').slideToggle('slow');    

});
$('#bar1').click(function () {
 $("div").hide();
   $('#foo1').slideToggle('slow');
});