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

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

我用类、
做了你想要的手风琴风格，

$('#bar, #bar1').click(function () {
    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');
    }
    else {
        $(id).toggleClass('open');
    }
});

#foo {
    width: 100px;
    height: 0;
    background-color: green;
    display:block;
    transition: all .5s;
}
#foo1 {
    width: 100px;
    height: 0;
    background-color: green;
    display:block;
    transition: all .5s;
}

#foo.open, #foo1.open {
    height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bar" data-for="foo">bar</button>
<div id="foo"></div>
<button id="bar1" data-for="foo1">bar1</button>
<div id="foo1"></div>

Answer 2

您可以使用 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

Answer 3

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

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

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

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

case 1 in fiddler

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

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

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

case 2 in fiddler

希望我的回答对你有帮助:)

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

Second toggel should be close when i click back to the first toggle

javascript

toggle