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。说：我有Slider 1打开。当我打开Slider 2时，然后关闭Slider 1 。应始终只打开Slider

我希望你能帮助我

谢谢

Answer 1

只需使用此jquery代码：

<强> Fiddle DEMO

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

Answer 2

您是否看过Jquery UI手风琴

Accordian

我认为你想要这种行为

Answer 3

你可能想要这样的东西：

enter link description here

$(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}

Answer 4

框[.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>

Javascript，Toggle，Slide

4 个答案: