JQuery MagicLine 导航到下拉菜单

Question

我在我的一个元素中使用了魔术线。除了一些下拉元素外，它工作得很好。当我单击某些下拉菜单时，它会重置到页面末尾。理想情况下，我希望它保持在父导航之上。

我正在使用 Bootstrap 下拉菜单。

HTML代码:

 <div id="navbar" class="navbar-collapse collapse navbar-right">
        <ul id="navigation" class="nav navbar-nav" style="position:relative;">
          <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle disabled" href="#">About<b class="caret"></b></a>
             <ul class="dropdown-menu">

                    <li><a href="#" >Team</a></li>
                    <li><a href="#" >Investors</a></li>
                    <li><a href="#">Board</a></li>
                    <li ><a href="#" >Culture</a></li>

              </ul>
            </li>
           <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle disabled" href="#">Products<b class="caret"></b></a>
             <ul class="dropdown-menu">
                    <li><a href="#">All Spark</a></li>
                    <li><a href="#" >Engage</a></li>
             </ul>
            </li>
 </ul></div>

JS代码:

$(function() {
/* Add Magic Line markup via JavaScript, because it ain't gonna work without */
$("#navigation").append("<li id='magic-line'></li>");
/* Cache it */

var $magicLine = $("#magic-line");

$magicLine
    .width($(".active").width())
    .css("left", $(".active a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#navigation li").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});
}); 

CSS 代码:

#magic-line { position: absolute; bottom: -4px; left: 0;  height: 4px; background: #fff; opacity:0; width:68px !important;}

#navigation li:hover ~ #magic-line, #navigation li.op ~ #magic-line{ opacity:1;}

Answer 1

我遇到了同样的问题。这个问题背后的原因是，导航栏中的所有 bootstrap li 都是 Position:relative，但是 magic menus li 必须在 Position:static。

我是如何解决这个问题的:

我将所有的 li 设置为 position:static:

 .nav > li{position:static}

然后我添加这个 css:

.nav > li .open{position:relative}

这样就可以了。