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，但魔术菜单li必须位于Position:static。

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

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

 .nav > li{position:static}

然后我添加这个css：

.nav > li .open{position:relative}

这样做。

Answer 2

除了Asm的更改，我还编辑了

行

$("#navigation li").find("a").hover(function() {

到

$("#navigation>li").hover(function() {

JQuery MagicLine导航到下拉菜单

2 个答案: