简体   繁体   中英

Bootstrap nav items not appearing in mobile

I'm having a frustrating issue with bootstrap's mobile navigation. The issue is that the menu items are not appearing after clicking the button for display. I've tried several fixes on two different phones with no result.

The first fix was adding the below code as mentioned on http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/ though this is for version 2.3.2. I also used the previous code with no results.

      $('.dropdown-toggle').click(function(e) {
           e.preventDefault();
           setTimeout($.proxy(function() {
        if ('ontouchstart' in document.documentElement) {
           $(this).siblings('.dropdown-backdrop').off().remove();
         }
        }, this), 0);
      });

The second effort was removing

    if ('ontouchstart' in document.documentElement) {
      $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
    }

From the bootstrap minified js doc.

The code for the navbar itself is below, the main edit being the removal of the container though it didn't work even with the container present. I can't figure this out for the life of me, your help is appreciated.

  <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navigation-toggle"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> 

Forget other manual fixing because bootstrap have it own. Just simply call JS_FILE_PATH/bootstrap.min.js after calling any standard jQuery version. Remember bootstrap.min.js will not work if you do not call jquery before it.

I hope this'll solve your issue. I tried this on my own.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM