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