Question

当您单击xs屏幕的导航栏外部和内部时，我使用下面的代码折叠导航栏。如果您没有下拉菜单，代码很有用。我已经在我的导航栏上引入了下拉菜单，所以当您尝试在小屏幕上打开下拉列表时，导航栏会崩溃。如何让这些下拉列表始终为xs屏幕打开并隐藏其父链接？

崩溃导航的脚本

    // Collase if Click Happened Inside of .navbar
    $('.navbar-nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !=='none'){
            $(".navbar-toggle").trigger("click");
        }
    });

    // Collase if Click Happened Outside of .navbar 
    $('body').bind('click', function(e) {
        if($(e.target).closest('.navbar').length === 0) {
            // click happened outside of .navbar, so hide
            var opened = jQuery('.navbar-collapse').hasClass('collapse in');
            if ( opened === true ) {
                $('.navbar-collapse').collapse('hide');
            }
        }
    });

html代码

    <!-- Navigation Bar --> 
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a href="#page-top" title="Welcome" target="_self" class="navbar-brand page-scroll">Brand</a>

              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                    <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="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#about" title="About US" target="_self" class="page-scroll">About</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" title="Our Services &amp; Skills" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">
                            Services <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a href="#services" title="OUR Services" target="_self" class="page-scroll">OUR Services</a>
                            </li>
                            <li>
                                <a href="#skills" title="Our Skills Chart" target="_self" class="page-scroll">OUR Skills Chart</a>
                            </li>
                        </ul>
                    </li>                        
                    <li class="dropdown">
                        <a href="#" title="Our Portfolio &amp; Testimonials" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">
                            Portfolio <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a href="#portfolio" title="Our Portfolio" target="_self" class="page-scroll">OUR Work</a>
                            </li>
                            <li>
                                <a href="#testimonials" title="Testimonials" target="_self" class="page-scroll">Testimonials</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#team" title="Our Team" target="_self" class="page-scroll">Team</a>
                    </li>
                    <li>
                        <a href="#contact" title="Contact US" target="_self" class="page-scroll">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

Answer 1

更新事件绑定以处理点击.navbar内部的Happened，如下所示

// Collase if Click Happened Inside of .navbar
$('.navbar-nav a').on('click', function(){ 
    if(!$(this).parent('.dropdown').length && $('.navbar-toggle').css('display') !=='none'){
        $(".navbar-toggle").trigger("click");
    }
});

以下是演示： https://jsfiddle.net/ye7z26Lx/2/

如何让xs屏幕始终打开导航栏下拉？

1 个答案: