導航欄下拉列表自動打開並自動關閉？

我在另一個網站的導航欄上添加了一個下拉列表，並將類.open添加到列表中。我的意圖如下：加載時，網頁導航欄列表中包含一個img元素，並打開顯示促銷優惠。到目前爲止，頁面加載和列表顯示廣告，如果點擊它然後關閉。導航欄下拉列表自動打開並自動關閉？

好吧我想要的是通過jQuery或JavaScript或CSS添加一個函數，它會在大約5秒後自動關閉下拉列表。我讀過bootstraps.min.css中的.open類在默認情況下不會被清除，因此它將保持打開狀態，除非它被「單擊」關閉。

<div class="navbar-responsive"> 
    <ul class="nav navbar-nav"> 
    <li class="active"> 
    <li class="open dropdown-menu"> 
     <a href="#" Id="test" class="dropdown-toggle" data-    toggle="dropdown"><strong class="caret">

<ul class="dropdown-menu"> 
    <li> 
     <a href="#">Click to close.</a> 
     </li> 

      <li> 
      <img src="image folder/my_ad_image.png" 
      </li> 
      </ul> 
     </li> 
    </li> 
    </ul> 
    </div><!---end nav collapse---> 
    </div><!---end container---> 
    </div>>!---end main navbar--->

這上面是我寫的。它停在已有的導航欄上。感謝您的閱讀。

如果任何人有任何建議或可以指出我正確的方向關於綁定jQuery超時函數到我的.open類或ID將是偉大的。到目前爲止，我一直無法綁定jQuery的功能或CSS到我的下拉列表謝謝。

來源

2016-02-12 GreatScott

小jQuery將做這個工作很好。你有什麼嘗試？ http://getbootstrap.com/javascript/#dropdowns-methods – isherwood

我試着不透明的緩解開始1移動到0，但它不關閉下拉。我要麼嘗試錯誤的方法，要麼開放類.open需要被釋放。無法確定 – GreatScott

您可以使用setTimeout()在javascript中實現定時器。

的setTimeout()方法調用的函數或毫秒的指定次數後計算表達式。

適應你的代碼就可以這樣實現：

CSS：

... 
<li id="myid" class="open dropdown-menu"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong class="caret"></strong></a> 
    <ul class="dropdown-menu"> 
     <li> 
      <a href="#">Click to close.</a> 
     </li> 

     <li> ... </li> 
    </ul> 
</li> 
...

的JScript（假設你使用jQuery）：

$(function() { 
    setTimeout(function() { 
     $("#myid").removeClass("open") 
    }, 5000); 
});

來源

2016-02-12 19:08:24 Bjoern

我傾向於使用下拉的hide（）方法，以防萬一它對DOM做其他事情。 – isherwood

@isherwood當然，'hide（）'更適合這裏。我只是想擺脫上下文中的一個小例子來強調'setTimeout（）'。 – Bjoern

謝謝，但沒有工作。也許drop class是相關的，我不知道但是列表在五秒後不會再關閉。仍然只是關閉點擊。 – GreatScott

導航欄下拉列表自動打開並自動關閉？

回答

相關問題