javascript - Bootstrap 导航项未出现在移动设备中

标签 javascript jquery html css twitter-bootstrap

我在使用 Bootstrap 的移动导航时遇到了一个令人沮丧的问题。问题是单击显示按钮后菜单项没有出现。我在两部不同的手机上尝试了几次修复,但没有结果。

第一个修复是添加以下代码,如 http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/ 中所述尽管这是针对 2.3.2 版的。我也用了之前的代码,没有结果。

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

第二个努力是去除

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

来自 Bootstrap 缩小的 js 文档。

导航栏本身的代码在下面,主要的编辑是删除容器,尽管它在容器存在的情况下也不起作用。我终生无法解决这个问题,感谢您的帮助。

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

最佳答案

忘记其他手动修复,因为 bootstrap 有它自己的。只需在调用任何标准 jQuery 版本后调用 JS_FILE_PATH/bootstrap.min.js 即可。请记住,如果您不在它之前调用 jquery,bootstrap.min.js 将无法工作。

希望这能解决您的问题。我自己试过了。

关于javascript - Bootstrap 导航项未出现在移动设备中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27220534/

相关文章:

javascript - 我的对象填充可观察数组中的信息不会显示在我的 View 中

javascript - 单击新窗口,在新窗口中更改元素

非表单元素的 jQuery 更改事件

jquery - 将鼠标悬停在图像上时如何显示覆盖相邻图像的描述?

javascript - 主干内联 HTML 模板与外部模板

php - 在不重新加载的情况下使用 textarea 内容更新 MySQL

javascript - 如何使背景图像在缩放时保持不变?

javascript - 如何使用 JavaScript 重定向?

javascript - 如何在接近右边距时将 jQuery aToolTip 插件修改为 "flip"向左?

javascript - 无法通过 Javascript 更改元素位置