jquery toggle（）在DIV隱藏其他div的

我正在使用下面的代碼通過單擊塊標題來切換div。我需要使相應的div出現在各個塊標題的點擊上。另外這些div應該自己切換。jquery toggle（）在DIV隱藏其他div的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
    a { color:#C30; text-decoration:none; } 
    #banner { width: 930px; background-color:#666; height: 500px; } 
    #banner ul { list-style:none; padding: 40px; } 
    #banner ul li { margin: 10px 0 0 0; } 
    #banner ul li a { display:inline-block; border:5px solid #fff; background-color:#FC9; padding:10px; font: bold italic 18px Verdana; } 
    .sliderContent { border:5px solid #fff; background-color:#FC9; padding:10px; min-height: 150px; display:none; margin-top:5px; } 
    .sliderContent a { padding:0 !important; border:none !important; } 
    .sliderContent a.closeButton { background:url(icon_modal_close.png) no-repeat 0 0; float:right; height:30px; width:30px; text-indent:-999px; } 
</style> 
<script type="text/javascript" language="javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('a.box').click(function(event){ 
      event.preventDefault(); 
      $(this).next('.sliderContent').toggle(function() { 
       $('.sliderContent').not(this).hide(); 
      }); 
     }); 
     $('.closeButton').click(function(){ 
      $(this).parent().hide(); 
     }); 
    }); 
</script> 
</head> 
<body> 
<div id="banner"> 
    <ul> 
     <li> 
      <a href="#" class="box">Design</a> 
      <div class="sliderContent"> 
       <a class="closeButton" href="#">Close</a> 
       Lorem Ipsum Doner 
      </div> 
     </li> 
     <li> 
      <a href="#" class="box">Development</a> 
      <div class="sliderContent"> 
       <a class="closeButton" href="#">Close</a> 
       Lorem Ipsum Doner 
      </div> 
     </li> 
     <li> 
      <a href="#" class="box">Graphics</a> 
      <div class="sliderContent"> 
       <a class="closeButton" href="#">Close</a> 
       Lorem Ipsum Doner 
      </div> 
     </li> 
    </ul> 
</div> 
</body> 
</html>

現在問題是與DIV hide（）函數。切換功能先執行然後hide（）功能進入畫面。這使得我的佈局失真，因爲在屏幕上顯示兩個div一會兒。

它應該像div會先隱藏，然後當前div會出現。

請幫助我一樣。

感謝 LOKESH亞達夫

來源

2011-02-23 Lokesh Yadav

試試這個：

$(document).ready(function() { 
     $('a.box').click(function(event){ 
      event.preventDefault(); 
      var sliderContent = $(this).next('.sliderContent'); 
      $('.sliderContent').not(sliderContent).hide(); 
      sliderContent.toggle(); 
     }); 
     $('.closeButton').click(function(){ 
      $(this).parent().hide(); 
     }); 
    });

這裏的jsfiddle：http://jsfiddle.net/JtSsM/5/

來源

2011-02-23 16:19:13 alexl

它就像魅力:)非常感謝你救了我的生活亞歷克斯:) –

客戶要求改變，現在我想要做的是如果我點擊塊，然後該框本身得到擴大。相反，動畫這個盒子，我刪除了李塊的邊界底部。請給我建議正確的方法，讓它像塊本身在點擊時一樣。你可以查看活的代碼，我做了什麼http://jsfiddle.net/ylokesh/Jvuqa/ –

這樣的事情：http://jsfiddle.net/Jvuqa/10/？ – alexl

jquery toggle（）在DIV隱藏其他div的

回答

相關問題