Question

所以我花了最后48小时尝试在阳光下找到的所有东西，无法到达任何地方，所以我将它留给你所有聪明聪明的大脑。

我刚开始使用bootstrap不久前，我有一个NAV栏，有4个项目：主页，服务，下载和联系。

“服务”项是唯一具有下拉列表的项目。

下拉菜单适用于台式机/笔记本电脑浏览器，但在我的手机上（使用Chrome浏览器的Android），它的工作效果并不理想。

在移动设备上，由于屏幕大小，Bootstrap将整个导航栏变为下拉菜单，因此＆＃34;服务＆＃34;下拉列表位于父下拉列表中。当我点击＆＃34;服务＆＃34;要获得包含所有服务的下拉菜单，我会看到下拉列表打开，因为我看到了文本的一瞥，然后父母和服务div将立即关闭。

<!-- start navigation -->
    <script type="text/javascript">
        $('body').on('touchstart.dropdown'.'.dropdown-menu', function(e){e.stopPrpagation(); })
    </script>

    <nav class="navbar navbar-default navbar-fixed-top templatemo-nav" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <img src="images/Logo-banner.jpg" height="auto" width="auto" />
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand"></a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right text-uppercase">
                    <li><a href="#home">Home</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#feature">Computer, Tablet &amp Phone Services</a></li>
                            <li><a href="#">On Site Services</a></li>
                            <li><a href="#">Remote Services</a></li>
                            <li><a href="#">Managed Services</a></li>
                            <li><a href="#">New &amp Used Computer Sales</a></li>
                            <li><a href="#">Custom Built Computers</a></li>
                        </ul>
                    </li>

                    <!--<li><a href="#pricing">About</a></li>-->
                    <li><a href="#download">Download</a></li>
                    <!--<li><a href="#download">Contact</a></li>-->
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- end navigation -->

我在这里查了很多问题，有人说使用类似这个的javascript函数：

<script type="text/javascript">
                        $('.dropdown li, .dropdown a').click(function(e) {
                            e.stopPropagation();
                        });
                    </script>

其他人说您需要手动显示/隐藏下拉列表。

到目前为止，没有任何对我有用。我是自学成才的程序员，所以尽可能详细，我将非常感谢。如果您需要任何其他信息，请告诉我，

谢谢，

Bootstrap Nav Bar下拉列表在移动浏览器上自动关闭

0 个答案: