javascript - Bootstrap 下拉菜单在移动设备上单击链接之前折叠

Question

此问题仅在屏幕宽度小于 990

使用基于Bootstrap 构建的启动框架，我的导航栏中有一个下拉菜单。它在网站的桌面版本上完美运行，但在移动版本上，当单击下拉菜单时，它会显示链接，然后立即再次折叠。这使得无法从移动设备浏览网站。

导航栏的链接是HERE

这是我的导航 html

 <div class="collapse navbar-collapse pull-right">
                    <ul class="nav pull-left">                                              
<?php
$pages = array(
    "home" => "HOME", 
    "about" => "ABOUT"
); 
$p = (isset($_GET['p'])) ? $_GET['p'] : "";
foreach ($pages as $url => $label) {
?>
<li><a <?= $p == $url ? 'class="active"' : ""?> href="index.php?p=<?=$url?>" > <?=$label?> </a></li>
<?php
}
?>   

 <li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">SERVICES<b class="caret"></b></a>
                <span class="dropdown-arrow"></span>   
                    <ul class="dropdown-menu">
                    <li><a href="engineering.php">ENGINEERING</a></li>
                    <li><a href="#">CERTIFICATION</a></li>
                    <li><a href="#">MANUFACTURING</a></li>            
                  </ul>
                </li>    

 <li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">CONTACT<b class="caret"></b></a>
                <span class="dropdown-arrow"></span>   
                    <ul class="dropdown-menu">
                    <li><a href="contact.php">CONTACT US</a></li>
                    <li><a href="employees.php">EMPLOYMENT</a></li>
                    <li><a href="empPortal.php">EMPLOYEE PORTAL</a></li>
                    <li><a href="cust.php">CUSTOMER PORTAL</a></li>             
                  </ul>
                </li>    
                </div>    
            </div>          
        </div>
    </div>

我已将下拉类移至 a 标记并将下拉菜单包装在单独的 div 中，但没有任何帮助。我唯一能想到做的就是弄乱 JS 但我不知道从哪里开始？

这是 Bootstrap 的已知问题吗？还是我的代码中遗漏了什么？

window.isRetina = (function() {
    var root = ( typeof exports == 'undefined' ? window : exports);
    var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),(min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(min-resolution: 1.5dppx)";
    if (root.devicePixelRatio > 1)
        return true;
    if (root.matchMedia && root.matchMedia(mediaQuery).matches)
        return true;
    return false;
})();

window.startupKit = window.startupKit || {};

startupKit.hideCollapseMenu = function() {
    $('body > .navbar-collapse').css({
        'z-index': 1
    });
    $('html').removeClass('nav-visible');
    setTimeout(function() {
        $('body > .navbar-collapse').addClass('collapse');
        $('body > .colapsed-menu').removeClass('show-menu');
    }, 400)
}

$(function () {
    $('.page-wrapper, .navbar-fixed-top, .navbar-collapse a, .navbar-collapse button, .navbar-collapse input[type=submit]').on('click', function(e) {
        if($('html').hasClass('nav-visible')) {
            setTimeout(function(){
                startupKit.hideCollapseMenu();
            }, 200)
        }
    });
    $(window).resize(function() {
        if($(window).width() > 965) {
            startupKit.hideCollapseMenu();
        }
    });

    var menuCollapse = $('#header-dockbar > .colapsed-menu').clone(true);
    $('body').append(menuCollapse);

    $('#open-close-menu').on('click', function () {
        if($('html').hasClass('nav-visible')) {
            startupKit.hideCollapseMenu();
        } else {
            $('body > .colapsed-menu').addClass('show-menu');
            if($('#header-dockbar').length) {
                 $('body > .colapsed-menu').css({
                    top: $('#header-dockbar').height()
                });
            }
            setTimeout(function() {
                $('html').addClass('nav-visible');
            }, 1)
        }
    });
});

Answer 1

好的，在分析了你的代码后，有几件事引起了我的注意

1. 在大约 1000 的屏幕尺寸下，您的屏幕会移动并创建一个空白区域
2. 您使用了 body > .navbar-collapse .pull-right，这是错误的向右拉，其中没有导航折叠。
3. 您正在使用未使用的 page-transitions.js 和 swipebox.js

建议:

1. 删除不需要的 js，这样就不会产生不必要的冲突。
2. 在调用 .pull-right 时检查它是造成折叠问题的类

编辑:你能告诉我这个折叠函数 js 在哪里吗？我找不到它，如果你知道我可以提供更好的帮助

EDIT2:尝试将 .navbar-collapse 更改为 .navbar-collapse li:not(.dropdown)

$(function () {
    $('.page-wrapper, .navbar-fixed-top, .navbar-collapse li:not(.dropdown), .navbar-collapse button, .navbar-collapse input[type=submit]').on('click', function(e) {
        if($('html').hasClass('nav-visible')) {
            setTimeout(function(){
                startupKit.hideCollapseMenu();
            }, 200)
        }
    });