javascript - Javascript，切换，幻灯片

Question

http://jsfiddle.net/Z9zD8/271/

$(function() 
{
    $('#toggle1').click(function() {
        $('.toggle1').toggle();
        return false;
    });

    $('#toggle2').click(function() {
        $('.toggle2').toggle();
        return false;
    });

    $('#toggle3').click(function() {
        $('.toggle3').toggle();
        return false;
    });

    $('#toggle4').click(function() {
        $('.toggle4').toggle();
        return false;
    });

});

我想要，它总是只打开一个滑块。说：我打开了 Slider 1。当我打开 Slider 2 时，然后关闭 Slider 1 。它应该始终只打开一个 Slider

我希望你能帮帮我

谢谢你

Answer 1

框 [.toggle1, .toggle2, .toggle3, ..] 应该有一个类似 '.toggle' 的类，并删除链接元素上的 [#toggle1, #toggle2, #toggle3, ..]，然后试试这个 jQuery 代码：

$(function() {
   $('a').on('click', function(e) {
        e.preventDefault();
        $('.toggle').slideUp();
        $(this).next().next().next('.toggle').slideDown();
   });
});

你的html代码：

<a href="#">Simple Div Toggle</a><br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

<a href="#">Simple Div Toggle</a><br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

<a href="#">Simple Div Toggle</a><br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

<a href="#">Simple Div Toggle</a><br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

Answer 2

只需使用此 jquery 代码：

小提琴演示

$("a[id^='toggle']").click(function(){
      $('div[class^="toggle"]').slideUp(500);
      $("."+$(this).attr("id")).slideToggle(500);        
});

Answer 3

你看过 Jquery UI 手风琴吗

手风琴

我想你想要这种行为

Answer 4

你可能想要这样的东西：

在此处输入链接描述

$(function () {
    $(".flyout").siblings("span").click(function () {
        $(".flyout").slideUp(200, function() {
            $(this).siblings(".flyout").toggle(500);
        });
        $(this).siblings(".flyout").toggle(500);
    });
});


<ul>
<li ><span id="europe">Europe</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>

<li ><span id="europe">Asia</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>

.flyout {display: none}