jquery指定css框

Question

嘿，大家好，我在将 JQuery SlideToggle 操作指定到特定选项卡(文本框)时遇到问题，目前它正在整个菜单中使用整个 SlideToggle 操作。当您将鼠标悬停在菜单选项卡上时，我希望每个菜单选项卡上的分隔线之间出现绿色滑动框。需要帮助...

http://jsfiddle.net/jfarr07/yKF65/1/

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>

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;
}
a:visited {
color:#000;
}
a:hover {
color:#FFF;
}
#navigation {
width:auto;
height:30px;
background:rgba(0, 0, 0, .25);
}
ul#nav {
display:inline;
}
li.nav {
display:inline-block;
margin: 0px 0px 0px 30px;
padding:0px 0px 0px 30px;
position:relative;
}
li~li { 
border-left: 1px solid #000000;

}
.panel {
position:absolute;
background:#0F3;
background-size:100%;
height:30px;
display:none;
width:100%;
}

JQuery

<script>
$(document).ready(function() {
    $("li.nav").hover(function() {
        $("#navigation").find(".panel").stop().slideToggle("fast");
    }, function() {
        $("#navigation").find(".panel").stop().slideToggle("fast");
    });
});
</script>

Answer 1

尝试下面

<script type="text/javascript">

    $(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,
                'height' : h,
                'position' : 'absolute'}).slideDown(50).css('display','block');

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

</script>
<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>