JQuery MagicLine導航到下拉菜單

我在我的一個項目中使用了魔術線。除了一些下拉元素之外，它完美地工作。當我點擊一些下拉菜單時，它會重置到頁面的末尾。理想情況下，我想讓它保持在父導航之上。JQuery MagicLine導航到下拉菜單

我正在使用引導下拉菜單。

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;}

來源

2015-06-23 Raju

我有同樣的問題。此問題背後的原因是，導航欄中的所有引導程序li均爲Position:relative，但magic菜單li必須位於Position:static中。

我如何解決這樣的：

我設置的所有li到position:static：

.nav > li{position:static}

然後我加入這個CSS：

.nav > li .open{position:relative}

這樣做。

來源

2015-09-26 14:44:15

你的答案是確定的，但如果你有一個新的問題，問這個作爲一個單獨的問題。在這裏（對答案），你應該只把你的答案*寫到原來的問題*中。 – peterh

除了ASM的變化我也編輯的行

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

到

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

來源

2015-10-08 00:55:43 Natedaug

JQuery MagicLine導航到下拉菜單

回答

相關問題