javascript内的bootstrap切换下拉菜单

Question

I have a bootstrap 4 dropdown menu that expands (toggles) on hover instead of a click. On a click a link is followed. (I know, this is bad practice). Now I am trying to achieve that on touch-enabled devices, the link is never followed and on a click or touch the dropdown is toggled.

I have managed to disable the link, but I can't seem to toggle the menu. This is what I tried:

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%;
}

Or a live example on codeply .

How can I toggle the dropdown when I use e.preventDefault(); to block the link?

Edit : I have to use JS

Answer 1

You can add the :active on css on the same place you have the :hover and on the HTML you can simply remove the href

something like this on the CSS:

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

and on the HTML you can simply remove the

Answer 2

You can do that using d-**-none and d-**-block on the break point which you wanna show

 .dropdown:hover>.dropdown-menu { display: block; width: fit-content; } 

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown" style="cursor:pointer"> <a class="nav-link d-none d-sm-none d-md-none d-lg-block dropdown-toggle" id="navbarDropdown3" data-hover="dropdown" aria-haspopup="true" aria-expanded="false" href="/com">dropdown</a> <a class="nav-link d-lg-none dropdown-toggle" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="/com">dropdown</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown3"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul>