Question

嘿伙计们，

我的JQuery中有一个小故障。当我将鼠标悬停在每个标签区域上并水平移动时，.panel似乎会丢失其宽度属性，并在滑动切换时展开或缩小。有什么想法吗？

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

问题在于.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/

JQuery SlideToggle宽度扩展

1 个答案: