的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; 
    }); 

}); 

我想，这始终是敞开的只是一个滑块。 说：我打开滑块1。当我打开滑块2时，然后关闭滑块1 。 它应该永远是只开一个滑块

我希望你能帮助我

谢谢

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>