导航栏下拉列表自动打开和自动关闭？

Question

我在另一个站点的导航栏中添加了一个下拉列表，并将 .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 绑定到我的下拉列表 谢谢。

Answer 1

你可以使用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);
});