时间戳

首页 > 解决方案 > javascript中的引导切换下拉菜单

javascript - javascript中的引导切换下拉菜单

问题描述

我有一个 bootstrap 4 下拉菜单，它在悬停时展开（切换）而不是单击。单击后，将跟随一个链接。（我知道，这是不好的做法）。现在我试图在支持触摸的设备上实现这一点，链接永远不会被跟踪，并且单击或触摸下拉菜单会被切换。

我已设法禁用该链接，但似乎无法切换菜单。这是我尝试过的：

JS

var button = jQuery('.btn-dropdown-link');


if ('ontouchstart' in window) {
  button.click(function (e) {
    e.preventDefault();
    console.log('clicked / touched');
    jQuery('#dropdownMenuButton').dropdown('toggle'); // this does not work? 
  });
}

HTML

<ul>
    <li class="btn dropdown" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false">
        <a class="btn btn-dropdown-link dropdown-toggle" href="/com">some link</a>
        <ul class="dropdown-menu" id="dropdownDonateMenu" aria-labelledby="dropdownMenuButton">
            <li><a href="#">example</a></li>
            <li><a href="#">example</a></li>
            <li><a href="#">example</a></li>
        </ul>
    </li>
</ul>

CSS

.dropdown:hover > .dropdown-menu {
  max-height: 500px;
  opacity: 1;
}

.dropdown .dropdown-menu {
  transition: all 0.3s;
  max-height: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  min-width: 100%;
}

或者codeply 上的一个活生生的例子。

e.preventDefault();当我使用阻止链接时如何切换下拉列表？

编辑：我必须使用 JS

标签： javascriptbootstrap-4

解决方案

您可以在具有 :hover 的同一位置上的 css 上添加 :active ，并且在 HTML 上您可以简单地删除 href

在 CSS 上是这样的：

.dropdown::active > .dropdown-menu, .dropdown::active > .dropdown-menu {
  max-height: 500px;
  opacity: 1;
}

在 HTML 上，您可以简单地删除

推荐阅读