Question

我正在开发网站：

http://www.dinewine.com/startbootstrap-agency-1.0.6/index.html

当我尝试在桌面以外的任何设备上使用汉堡包菜单时，汉堡包菜单会打开，但单击字形图标时子项目不会显示，下拉菜单会关闭。

我不确定从哪里开始。我检查了开发者网站，他们没有使用下拉菜单。

任何信息都将不胜感激。非常感谢。 -Beth

我的下拉菜单代码为：

<li class="dropdown">
  <a href="#" dropdown-toggle data-toggle="dropdown">Special Events<span class="glyphicon glyphicon-chevron-down"></span></a>
  <ul class="dropdown-menu">
    <li><a href="http://www.dinewine.com/special_event.pdf"   target="_blank">Rehersal Dinners</a></li>
  </ul>
</li>

没有子菜单：

<li>
  <a class="page-scroll" href="http://www.opentable.com/grahams-at-squaw-  valley-reservations-olympic-valley?rid=93322&restref=93322"     target="_blank">Reservations</a>
</li>

Answer 1

这是您更新的代码..

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Special Events<span class="glyphicon glyphicon-chevron-down"></span></a>
  <ul class="dropdown-menu">
    <li><a href="http://www.dinewine.com/special_event.pdf"   target="_blank">Rehersal Dinners</a></li>
  </ul>
</li>

我添加了课程

类=＆＃34;下拉肘节＆＃34;

现在它的工作顺利。如果您想在悬停时按下拉菜单，请转到here。

如果您需要下拉菜单，则可以悬停在桌面上并点击移动设备。然后转到here.

Answer 2

如果我不得不猜测可能是因为您的脚本在您点击链接时关闭了响应式菜单。我看到你在页面上滚动到锚点的每个链接都有.page-scroll类，所以只需将它添加到关闭响应式菜单的类选择器。

下面的jquery脚本位于底部的agency.js文件中，只是将.page-scroll的类添加到jquery选择器中，并且还从任何链接中删除.page-scroll的类。激活下拉菜单，因为当您只是尝试打开下拉菜单时显然不会滚动页面，因此在christy lodge链接中从下拉切换链接中删除.page-scroll类。在这些变化之后，它应该可以解决问题。

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a.page-scroll').click(function() {
    $('.navbar-toggle:visible').click();
});

此外，我注意到在您的上述HTML标记中，您忘记将class =“dropdown-toggle”添加到您的<a>代码中，只需将下拉菜单切换即可。它读取

<a href="#" dropdown-toggle data-toggle="dropdown">Special Events<span class="glyphicon glyphicon-chevron-down"></span></a>

它应该是：

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Special Events<span class="glyphicon glyphicon-chevron-down"></span></a>

在您网站上的源代码中，Christy lodge下拉链接是正确的，但特殊事件链接有此错误。不要认为它有很大的影响，但我想你会告诉你。

而且我也不确定你是否知道但是你已经连接了bootstraps javascript文件两次，我相信它会导致你的控制台出错，所以你可能想删除你头部的bootstraps javascript文件的链接。

Answer 3

尝试这个，它是一个黑客，但应该工作

在agency.js

$('.navbar-collapse ul li a').click(function() {
    if($(event.target.parentElement).hasClass("dropdown")) {
         event.stopPropagation();
         $(event.target.parentElement).attr("class","dropdown open");
    } else {
         $('.navbar-toggle:visible').click();
   }
});

下拉桌面以外的任何设备上的子菜单项不起作用

3 个答案: