Javascript 引导导航栏下拉列表在移动浏览器上自动关闭

所以在过去的48小时里，我一直在尝试我在阳光下发现的一切，但却一事无成，所以我要让你们所有的神奇、聪明的头脑来决定

不久前我刚开始使用bootstrap，我有一个导航栏，它有4项：主页、服务、下载和联系人

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

该下拉列表在台式机/笔记本电脑浏览器上运行良好，但在我的手机（android使用chrome浏览器）上运行不太好

在手机上，由于屏幕尺寸的原因，Bootstrap将整个导航栏变成了一个下拉菜单，因此“服务”下拉菜单位于父下拉菜单中。当我单击“服务”以获得包含所有服务的下拉菜单时，我会在一瞬间看到下拉菜单正在打开，因为我看到了文本，然后立即关闭父和服务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 -->

$（'body'）.on（'touchstart.dropdown'..dropdown menu'，函数（e）{e.stopperpagation（）；}）

我在这里查找了许多问题，有人说使用类似于此的javascript函数：

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

$（'.dropdown li，.dropdown a'）。单击（函数（e）{
e、 停止传播（）；
});

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

到目前为止，我什么也没做。我是自学成才的程序员，所以请尽可能详细地描述，我将不胜感激。如果你还需要什么，请告诉我

---

谢谢，

您应该将所有代码放入JSFIDLE（html/css/js）中，以便查看。嗯，确实是这样，但我完全不知道如何让引导程序在那里工作…@丹尼尔·莫特。要将引导添加到JSFIDLE，请转到此处，将css和js都复制到JSFIDLE的“外部资源”部分。有一个新的链接。但是，这个下拉列表在JSFIDLE上根本不起作用。还有一些文件，如bootstrap.min.css、animate.min.css、jquery.js、wow.min.js等，我保存的文件几乎不可读，链接在标题中。我不知道如何将它们放入。您应该将所有代码放入JSFIDLE（html/css/js）中，以便查看。嗯，确实是这样，但我完全不知道如何让引导程序在那里工作…@丹尼尔·莫特。要将引导添加到JSFIDLE，请转到此处，将css和js都复制到JSFIDLE的“外部资源”部分。有一个新的链接。但是，这个下拉列表在JSFIDLE上根本不起作用。还有一些文件，如bootstrap.min.css、animate.min.css、jquery.js、wow.min.js等，我保存的文件几乎不可读，链接在标题中。我不知道怎么把它们放进去。