javascript - 当我单击返回第一个切换时，第二个切换应该关闭

Question

我有两个开关。我只想一次只出现一个切换。当我单击第二个切换时，第一个切换应该关闭。

Javascript

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

HTML

<button id="bar">bar</button>
<div id="foo"></div>
<button id="bar1">bar1</button>
<div id="foo1"></div>

CSS

#foo {
    width: 100px;
    height: 100px;
    background-color: green;
    display:none;
}
#foo1 {
    width: 100px;
    height: 100px;
    background-color: green;
    display:none;
}

jsfiddle

Answer 1

您可以使用classes代替id's

$('.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')
});

Example