个人中心
gpt4 book ai didi

css - 将鼠标悬停在大屏幕上时，Bootstrap 4 导航栏会打开下拉菜单，但会在小屏幕上打开

转载 作者：太空宇宙 更新时间：2023-11-04 07:25:35 27 4
gpt4 key购买 nike

我有一个导航栏，当我将鼠标悬停在下拉菜单标题上时，我想打开下拉菜单，我使用以下 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 toggler 在正常情况下是如何工作的)。如何在大屏幕上将鼠标悬停在下拉菜单标题上时打开下拉菜单，在小屏幕上单击下拉菜单标题时如何打开下拉菜单？

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>

最佳答案

您可以让您的 CSS 仅显示屏幕宽度超过 x 像素的悬停下拉菜单。然后单击功能在其折叠时将正常工作。例如，如果你想显示 768 以上:

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

关于css - 将鼠标悬停在大屏幕上时，Bootstrap 4 导航栏会打开下拉菜单，但会在小屏幕上打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49917742/

27 4 0
文章推荐： html - 无法在下拉列表与其与其他元素重叠的内容之间添加距离
文章推荐： python - python 是移动应用程序的首选语言吗？
文章推荐： Python类变量或一般的类变量
文章推荐： javascript - 如何添加 shift + enter 键转到下一行和提交按钮的 Enter 键？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com