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

Answer 2

我用课程做了你想做的事，
手风琴风格，

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

我希望我的回答可以帮助你：）

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

3 个答案: