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

Question

I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.

Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.

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

This above is what I have written. It rests atop an already existing navbar. Thanks for reading.

If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list Thanks.

Answer 1

You can use setTimeout() to implement timers in javascript.

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

Adapting your code it can be implemented like this:

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 (assuming you're using jQuery):

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