Question

我正在尝试创建一个引导导航栏，其中一些项目有一个下拉链接。但是，对于小屏幕（<768px），我想主要根据图标保留菜单而不显示下拉菜单。

到目前为止，我设法在点击时使用 xs-hidden 和 event.stopPropagation（）在小屏幕中显示子菜单。但是，这也会禁用较大屏幕尺寸的子菜单，这是我不想要的。

有没有办法只为小屏幕实现这种行为而不添加重复的菜单项并根据屏幕宽度隐藏/显示它？

相关代码如下。

HTML：

<li class="nav-item">
  <a href="/">
    <i class="glyphicon glyphicon-envelope visible-xs"></i>
    <span>Messages</span>
  </a>
</li>
<li class="nav-item dropdown" id="navbar-admin-dropdown">
  <a href="/" class="dropdown-toggle disabled-nav-item" data-toggle="dropdown">
    <i class="fa fa-cogs visible-xs"></i>
    <span>Admin</span>
    <b class="caret hidden-xs"></b>
  </a>
  <ul class="dropdown-menu hidden-xs">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</li>
<li class="nav-item">
  <a href="/">
    <i class="glyphicon glyphicon-off visible-xs"></i>
    <span>Logout</span>
  </a>
</li>

CSS

导航项仅用于对齐和布置每个链接。它不会影响下拉功能。

JS

$('.disabled-nav-item').on('click', function(event) {
  event.stopPropagation();
});

Answer 1

如果我做对了，问题就出现在event.stopPropagation();。

您可以使用jQuery检测屏幕宽度，如果它小于目标尺寸，请应用event.stopPropagation();。

$('.disabled-nav-item').on('click', function(event) {
    if ($(window).width() < 768) {
        event.stopPropagation();
    }
});

Working Example

保持Bootstrap导航下拉列表仅在小屏幕上打开

1 个答案: