我正在我的一个项目中使用魔术线。除了一些下拉元素外,它工作得很好。当我单击一些下拉菜单时,它会重置到页面的末尾。理想情况下,我希望它保持在父导航之上。
我正在使用引导下拉菜单。
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;}

最佳答案

我也有同样的问题。这个问题背后的原因是,navbar中的所有引导li都是Position:relative,但是magic menus li必须在Position:static中。
我是怎么解决的:
我将所有li设置为position:static

 .nav > li{position:static}

然后我添加这个css:
.nav > li .open{position:relative}

这样就行了。

关于jquery - jQuery MagicLine导航到下拉菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30997102/

10-11 23:25
查看更多