Question

我有一个导航栏，当我将鼠标悬停在下拉列表标题上时，我想打开下拉菜单，我使用此jquery代码完成了此操作：

$('body').on('mouseenter mouseleave', '.dropdown', function (e) {
    var dropdown = $(e.target).closest('.dropdown');
    var menu = $('.dropdown-menu', dropdown);
    dropdown.addClass('show');
    menu.addClass('show');
    setTimeout(function () {
        dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
        menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
    }, 300);
});

这个CSS：

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

问题是在小型设备上，当我点击下拉列表标题时，下拉列表会打开，但是当我再次点击时它将不会关闭（bootstrap 4如何在正常情况下切换它）。当我在大屏幕上悬停在下拉标题上并打开下拉列表时，如果我点击小屏幕上的下拉标题，我该如何打开下拉列表？

HTML：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?php echo base_url('assets/css/bootswatch.css'); ?>"/>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="<?php echo base_url('assets/css/overwrite.css');?>" type="text/css"/>
    <link rel="stylesheet" href="<?php echo base_url('assets/css/style.css');?>" type="text/css"/>
    <script src="<?php echo base_url('assets/jquery/jquery.js');?>"></script>
</head>
<body>
    <div class="top-text-container">
        <div class="top-text">
            <div class="top-text-left">Pentru Comenzi:
                <i class="fas fa-phone fa-lg"></i>
                <span id="top-number-phone">0746117702</span>
            </div>
            <div class="top-text-right"><a href="#" class="link">Login</a></div>
        </div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed">
        <a class="navbar-brand" href="#"><img class="logo-img" src="<?php echo base_url('assets/images/test2_logo.png');?>"/></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor03">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Acasa</a>
                    <span class="divider">|</span>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Meniu</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Pizza</a>
                        <a class="dropdown-item" href="#">Carne de pui</a>
                        <a class="dropdown-item" href="#">Carne de porc</a>
                        <a class="dropdown-item" href="#">Garnituri</a>
                        <a class="dropdown-item" href="#">Ciorbe</a>
                        <a class="dropdown-item" href="#">Salate</a>
                    </div>
                    <span class="divider">|</span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Meniul Zilei Weekend</a>
                    <span class="divider">|</span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Evenimente</a> <!--dropdown-->
                    <span class="divider">|</span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Blog</a>
                    <span class="divider">|</span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Galerie</a>
                    <span class="divider">|</span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
                <li class="nav-item cart">
                    <a class="nav-link" href="#"><i class="fas fa-shopping-cart fa-lg"></i></a>
                    <div id="cart-count">3</div>
                </li>
            </ul>
        </div>
    </nav>

Answer 1

您可以做的是让CSS仅在屏幕宽度大于x像素时显示悬停下拉菜单。然后，单击功能在折叠时将正常工作。例如，如果要显示768以上：

@media only screen and (min-width: 768px) {
    .dropdown:hover>.dropdown-menu {display: block;}
}

当悬停在大屏幕上时，Bootstrap 4导航栏打开下拉列表，但在小屏幕上打开以进行打开

1 个答案: