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 に答える