时间戳

首页 > 解决方案 > 下拉菜单不会在第二次点击/触摸时关闭

html - 下拉菜单不会在第二次点击/触摸时关闭

问题描述

我正在使用在线引导模板，但我发现当进入较小尺寸的屏幕时，下拉（商店）不会在第二次单击时关闭我该怎么办？这是代码。

$('nav .dropdown').hover( function(e) {
        e.stopPropagation(); 
        $('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
        $(this).toggleClass('open');
        $('b', this).toggleClass("caret caret-up");                
    },
    function(e) {
        e.stopPropagation(); 
        $('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
        $(this).toggleClass('open');
        $('b', this).toggleClass("caret caret-up");                
    });


    $('#dropdown04').on('show.bs.dropdown', function (e) {
        console.log('show');
    });

    $('.dropdown a').on('click', function (event) {
        e.stopPropagation(); 
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
        <div class="container">
          <a class="navbar-brand" href="index.html">Vegefoods</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="oi oi-menu"></span> Menu
          </button>

          <div class="collapse navbar-collapse" id="ftco-nav">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
              <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shop</a>
              <div class="dropdown-menu" aria-labelledby="dropdown04">
                <a class="dropdown-item" href="shop.html">Shop</a>
                <a class="dropdown-item" href="cart.html">Cart</a>
                <a class="dropdown-item" href="checkout.html">Checkout</a>
              </div>
            </li>
              <li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
              <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
              <li class="nav-item cta cta-colored"><a href="cart.html" class="nav-link"><span class="icon-shopping_cart"></span>[0]</a></li>

            </ul>
          </div>
        </div>
      </nav>
    <!-- END nav -->

谢谢你的帮助。

标签： htmljquerycssbootstrap-4

解决方案

删除属性data-toggle="dropdown"，然后，首先像这样处理单击以打开/关闭下拉列表；

$('a.dropdown').on('click', function () {
 $(this).parent().toggleClass('open'); 
});

然后等待下拉菜单之外的点击以关闭它；

$('a.dropdown').on('click', function () {
 $(this).parent().toggleClass('open'); 
});

推荐阅读