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

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

本文关键字：切换器 第二个 单击 返回 第一个      更新时间：2023-09-26

我有拖曳开关。我只想一次只显示一个切换。当我单击第二个切换时，第一个切换应该关闭。

爪哇语

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

斯菲德尔

您可以使用

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

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

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

嗨，

我有两种方法可以实现它

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

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

案例 1 在 小提琴手

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

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

案例 2 在 小提琴手

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

相关文章：