jquery - 如何阻止导航选项卡在移动 View 中打开导航栏？

Question

我有以下代码。当我单击导航选项卡时，将触发导航栏下拉菜单并显示我的菜单。它在单击时打开并在下一次单击时关闭。我正在使用 Bootstrap 3.3.6。我怎么解决这个问题？

<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>
                    <a href="#services" title="Our Services &amp; Skills" target="_self" class="page-scroll">Services</a>
                </li>
                <li>
                    <a href="#portfolio" title="Our Portfolio &amp; Testimonials" target="_self" class="page-scroll">Portfolio</a>
                </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>

导航标签

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#tab1" title="Client's Testimonial" target="_self" aria-controls="tab1" role="tab" data-toggle="tab"></a>
                    </li>
                    <li role="presentation">
                        <a href="#tab2" title="Client's Testimonial" target="_self" aria-controls="tab2" role="tab" data-toggle="tab"></a>
                    </li>
                    <li role="presentation">
                        <a href="#tab3" title="Client's Testimonial" target="_self" aria-controls="tab3" role="tab" data-toggle="tab"></a>
                    </li>
                    <li role="presentation">
                        <a href="#tab4" title="Client's Testimonial" target="_self" aria-controls="tab4" role="tab" data-toggle="tab"></a>
                    </li>
                </ul>

Answer 1

@media only screen and (max-width:768px) {
    .nav.nav-tabs{
        display: none;
    }
}