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/