JQuery SlideToggle Width Expanding

Question

嘿傢伙，

我在我的JQuery中有一個小故障。當我將鼠標懸停在每個選項卡區域上並水平移動時，.panel似乎失去了其寬度屬性，並且在滑動切換時可以展開或縮小。有任何想法嗎？

http://jsfiddle.net/jfarr07/5nEXB/

JQuery的

<script> 
$(function() 
{ 
    $("li.nav").hover(function() 
    { 
     var x = $(this).offset().left; 
     var y = $(this).offset().top; 
     //var w = $(this).width(); 
     var totalWidth = $(this).width(); 
     totalWidth += parseInt($(this).css("padding-left"), 10) + parseInt($(this).css("padding-right"), 10); //Total Padding Width 
     totalWidth += parseInt($(this).css("margin-left"), 10) + parseInt($(this).css("margin-right"), 10); //Total Margin Width 
     totalWidth += parseInt($(this).css("borderLeftWidth"), 10) + parseInt($(this).css("borderRightWidth"), 10); //Total Border Width 
     var h = $(this).height(); 

     //$("#navigation").find(".panel").stop().slideToggle("fast"); 
     $("#navigation").find(".panel").animate({ 
      top: y, 
      left : x 
     }, 0).css({'width' : totalWidth, 
      '40px' : h, 
      'position' : 'absolute'}).slideDown(200).css('display','block'); 

    }, function() { 
     $("#navigation").find(".panel").stop().slideUp("fast"); 
    }); 
}); 

CSS

body, html { 
padding:0; 
margin:0; 
background:url(../../Portfolio/images/wood2.png); 
} 

a:link { 
text-decoration:none; 
color:#000; 
font-family:open-sans, HelveticaNeue, Helvetica Neue Condensed Bold, Helvetica Neue, serif; 
-webkit-transition:all 0.4s ease; 
-moz-transition:all 0.4s ease; 
-ms-transition:all 0.4s ease; 
-o-transition:all 0.4s ease; 
transition:all 0.4s ease; 
} 

a:visited { 
color:#000; 
} 

a:hover { 
color:#FFF; 
    -webkit-transition:all 0.4s ease; 
-moz-transition:all 0.4s ease; 
-ms-transition:all 0.4s ease; 
-o-transition:all 0.4s ease; 
transition:all 0.4s ease; 
} 

#navigation { 
width:auto; 
height:40px; 
background:rgba(255, 255, 255, .45); 
min-width:700px; 
} 

ul#nav { 
display:inline; 
list-style-type:none; 
overflow:auto; 
padding:0; 
margin:0; 
} 

li.nav { 
display:inline-block; 
margin:0px 0px 0px 0px; 
padding:0px 0px 0px 0px; 
position:relative; 
height:30px; 
float:left; 
border-bottom:none; 
} 

ul li.nav a { 
display:block; 
padding-top:10px; 
padding-bottom:10px; 
padding-left:30px; 
padding-right:30px; 
} 

* html ul li a { 
width: 1%; 
} 

.panel { 
position:absolute; 
background:#363; 
background-size:100%; 
height:40px; 
display:none; 
width:100%; 
} 

HTML

<div id="navigation"> 
    <div class="panel"></div> 
    <ul id="nav"> 
     <li class="nav"><a href="#">HOME</a></li> 
     <li class="nav"><a href="#">OUR STORY</a></li> 
     <li class="nav"><a href="#">GALLERY</a></li> 
     <li class="nav"><a href="#">GIFT REGISTRY</a></li> 
    </ul> 
</div> 

Answer 1

問題就出在使用重疊的.pan埃爾。您在按時間順序重疊的轉場事件中使用相同的元素。

當您離開選項卡時，.panel設置爲它用於下一個選項卡的寬度。

您需要在離開標籤時立即隱藏面板，或者爲每個標籤使用單獨的面板。

更新：這裏是一個例子。

http://jsfiddle.net/5nEXB/1/

.panel {z-index: -1;} 

<div id="navigation"> 
    <div class="panel"></div> 
    <ul id="nav"> 
     <li class="nav"> 
      <div class="panel"></div><a href="#">HOME</a> 

     </li> 
     <li class="nav"> 
      <div class="panel"></div><a href="#">OUR STORY</a> 

     </li> 
     <li class="nav"> 
      <div class="panel"></div><a href="#">GALLERY</a> 

     </li> 
     <li class="nav"> 
      <div class="panel"></div><a href="#">GIFT REGISTRY</a> 

     </li> 
    </ul> 
</div> 

$(function() { 
    $("li.nav").hover(function() { 
     $(this).find(".panel").slideDown(); 
    }, function() { 
     $(this).find(".panel").slideUp(); 
    }); 
}); 

如果你不想把所有這些.panel的div在HTML中，你可以懸停使用jQuery前面加上它們。

如果由於某種原因，你要堅持你原來的做法，你可以做即時隱藏：http://jsfiddle.net/5nEXB/2/