Javascript 如何使引导导航顶级按钮可点击链接用于桌面而非移动设备？

Bootstrap的默认菜单行为是一个激活器，它对移动设备非常有效，但对台式机不起作用，如果您希望顶级按钮可以作为链接单击，同时能够在悬停时激活下拉菜单向链接类添加“禁用”使桌面工作，但会中断移动，当下拉列表不再扩展时，小型设备只加载URL

为了获得桌面的点击悬停，我在样式表中添加了推荐的CSS

/* iPad & larger display on hover */
@media (min-width: 768px) {
  ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;
  }
}

我将添加禁用类的链接导航代码设置为：

<a href="somepage.php" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false">Some Page <span class="caret"></span></a>

以上内容使其适用于768px或更宽的屏幕。我不知道如何禁用小型设备的下拉类。如果有，则单击该项加载页面（somepage.php），而不是显示somepage.php下的子项

展开的菜单代码如下所示：

<ul class="nav navbar-nav">
  <li class="dropdown <?php if ( $this_file == "somepage.php" ) { echo ' active '; } ?>">
    <a href="somepage.php" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false">Some Page <span class="_caret"></span></a>
    <ul class="dropdown-menu min-width" role="menu">
      <li class="mobile-only"><a href="somepage.php" <?php if ( $this_file == "somepage.php" ) { echo "class=\"active\""; } ?>>Some Page</a></li>
      <li><a href="item2.php" <?php if ( $this_file == "item2.php" ) { echo "class=\"active\""; } ?>>Item 2</a></li>
      <li><a href="item3.php" <?php if ( $this_file == "item3.php" ) { echo "class=\"active\""; } ?>>Item 3</a></li>
    </ul>
  </li>
  ...
</ul>

这个怎么样？仅当>768px时激活的一个可见，如果则禁用的一个可见。参考此（使用隐藏的X和可见的X）


制作snippet或jsffile以获取更多帮助第一个答案的方向是正确的，但是减去了您指出的“-12”。在发布问题之前，我创建了两个类，.mobile-only和.desktop-only，我尝试了它们，但无法在小型设备上正常工作。当然，我已经完全忘记了.hidden和.visible类。Thx它似乎在工作。虽然菜单，所有4个顶级按钮在我的智能手机和桌面正常宽度上都能完美工作，但如果我挤压浏览器来强制移动菜单（<768 px），就会出现一些古怪的行为。如果在主页上，它可以完美地工作。点击汉堡，点击顶层菜单，菜单展开。如果我单击其中一个辅助主菜单页面，它将正确到达该页面。然而，一旦进入该页面，如果我点击汉堡包，它会立即打开和关闭。是的，这个序列可以在智能手机上运行。你能在你的帖子中添加导致麻烦的代码吗？我会的，但是。。。昨天下午在做了修改之后，我在添加最后一条评论之前进行了认真的测试。在主页上，菜单运行良好，但如果在其他页面上单击汉堡图标，菜单立即打开/关闭，则浏览器将缩小到<768。奇怪的是，今天早上我又测试了一次，不管浏览器有多窄，它都能正常工作。你如何解释这种不一致性？重新启动浏览器，托管，沙鼠？
<a href="somepage.php" class="visible-xs-12 dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false">Some Page <span class="caret"></span></a>

<a href="somepage.php" class="hidden-xs-12 dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Some Page <span class="caret"></span></a>

   <ul class="nav navbar-nav">
      <li class="dropdown <?php if ( $this_file == "somepage.php" ) { echo ' active '; } ?> visible-xs  " >
        <a href="somepage.php" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false">Some Page <span class="caret"></span></a>
      </li>
      <li class="dropdown <?php if ( $this_file == "somepage.php" ) { echo ' active '; } ?> hidden-xs">
        <a href="somepage.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Some Page <span class="_caret"></span></a>
        <ul class="dropdown-menu min-width" role="menu">
          <li class="mobile-only"><a href="somepage.php" <?php if ( $this_file == "somepage.php" ) { echo "class=\"active\""; } ?>>Some Page</a></li>
          <li><a href="item2.php" <?php if ( $this_file == "item2.php" ) { echo "class=\"active\""; } ?>>Item 2</a></li>
          <li><a href="item3.php" <?php if ( $this_file == "item3.php" ) { echo "class=\"active\""; } ?>>Item 3</a></li>
        </ul>
      </li>

    </ul>