【发布时间】：2016-09-12 02:23:06
【问题描述】：
几天以来我一直在尝试解决这个问题。我找到了很多解决方案，但对我没有任何作用。 我正在使用引导程序 3.3.6，我想使用下拉菜单。 该代码在桌面屏幕上运行良好，但在移动屏幕上却不行。
这是一个截图：
当我点击“产品”时，全局菜单消失，我找不到子菜单。
这是我的代码：
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top shadoww">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top" style="width:250px;"><img src="img/logo.png" width="60%" style="margin-top: -4%;"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a id="translate0" class="page-scroll move" href="#home">Home</a>
</li>
<li class="dropdown">
<a id="translate01" href="#" class="dropdown-toggle move multiselect" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Product<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a class="page-scroll move" href="#product">Description</a></li>
<li role="separator" class="divider"></li>
<li><a id="translate39" class="page-scroll move" href="#compat">Compatibility</a></li>
</ul>
</li>
<li><a id="translate02" class="page-scroll move" href="#diapo">Gallery</a></li>
<li><a id="translate03" class="page-scroll move" href="#team">Founder</a></li>
<li><a class="page-scroll move" href="#contact">Contact</a></li>
<li><a id="popup" class="move" href="javascript://">Shop</a></li>
<li><a class="forum move" href="/forum/index.php" target="_blank">Forum</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a id="flagA" class="navbar-brand" href="javascript:doTranslate('fr')" style="width:80px;"><img id="flag0" onclick="javascript:changeImage('fra')" src="img/France-Flag-50.png" class='changer' width="55%" style="margin-top: -4%;"></a>
</li>
<li>
<a id="flagB" class="navbar-brand" style="width:80px;"><img id="flag1" src="img/UK-Flag.png" class='changer' width="55%" style="margin-top: -4%;"></a>
</li>
</ul>
</nav>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></div>
<div id="successn"></div>
</nav>
我已经尝试过stopPropagation 解决方案，但我认为这不是一个合适的解决方案。我也试过this solution但是没办法，还是一样的反应。
有人有其他想法吗？ （我知道，关于这个问题有很多问题......）谢谢
【问题讨论】：
-
这是你的完整代码吗？
-
不，只是菜单部分（不包括品牌链接）。当然，标题中有一个css文件和
<link>用于引导，最后有<script src="js/bootstrap.min.js"></script>
标签： html mobile drop-down-menu twitter-bootstrap-3