Question

此问题仅在屏幕宽度小于的情况下持续存在 990

使用startup framework上构建的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

分析你的代码后，很少有东西引起我的注意

屏幕尺寸为1000左右，屏幕会移动并创建一个空白区域
您使用了body > .navbar-collapse .pull-right这是错误的向右拉是导航崩溃不在其中。
您正在使用未使用的page-transitions.js和swipebox.js

建议：

删除不需要的js，这样就不会产生不必要的冲突。
检查 .pull-right 时，正在创建崩溃问题的类

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)
        }
    });

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

1 个答案: