0

大家好，

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

1 回答 1

3

问题在于 .panel 中的使用重叠。您在按时间顺序重叠的过渡事件中使用相同的元素。

当您离开一个选项卡时， .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/

于 2013-03-04T15:51:40.160 回答