个人中心
gpt4 book ai didi

javascript - 多级引导导航栏 : Can't hover on children elements

转载 作者：行者123 更新时间：2023-11-30 19:00:37 25 4
gpt4 key购买 nike

所以我尝试在我的元素中使用 Bootstrap Navbar 和额外的 CSS 和 Jquery 创建一个多级导航栏。

代码如下: CodePen

$(function() {
    // ------------------------------------------------------- //
    // Multi Level dropdowns
    // ------------------------------------------------------ //
    $("ul.dropdown-menu [data-toggle='dropdown']").on("mouseover", function(event) {
      event.preventDefault();
      event.stopPropagation();
      $(this).siblings().toggleClass("show");
    });

    $("ul.dropdown-menu [data-toggle='dropdown']").on("mouseleave", function(event) {
        $(this).siblings().removeClass("show");
    });
});
.dropdown-submenu {
    position: relative;
  }
  
  .dropdown-submenu>a:after {
    content: "\f0da";
    float: right;
    border: none;
    font-family: 'FontAwesome';
  }
  
  .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0px;
    margin-left: 0px;
  }
  .dropdown-item {
    padding: .25rem 0.5rem!important;
  }
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/5336ef90a8.js" crossorigin="anonymous"></script>
    <title>Test</title>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a class="navbar-brand" href="./"> <img class="favicon" src="{{asset('img/Favicon.ico')}}" alt=""> </a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#headerNav"
            aria-controls="headerNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="headerNav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                </li>
                <!-- Level one dropdown -->
                <li class="nav-item dropdown">
                    <a id="dropdownMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        class="nav-link dropdown-toggle">CATEGORIES</a>
                    <ul aria-labelledby="dropdownMenu1" class="dropdown-menu border-0 shadow">
<li class="dropdown-submenu">
                        <a id="dropdownMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false" class="dropdown-item dropdown-toggle">CEILING FANS</a>
                        <ul aria-labelledby="dropdownMenu2" class="dropdown-menu border-0 shadow">
                            <li>
                                <a tabindex="-1" href="#" class="dropdown-item">CF1</a>
                            </li>
                            <li><a href="#" class="dropdown-item">CF2</a></li>
                            <li><a href="#" class="dropdown-item">CF3</a></li>
                        </ul>
                    </li>

                    <li class="dropdown-submenu">
                        <a id="dropdownMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false" class="dropdown-item dropdown-toggle">TABLE FANS</a>
                        <ul aria-labelledby="dropdownMenu2" class="dropdown-menu border-0 shadow">
                            <li>
                                <a tabindex="-1" href="#" class="dropdown-item">TF1</a>
                            </li>
                            <li><a href="#" class="dropdown-item">TF2</a></li>
                            <li><a href="#" class="dropdown-item">TF3</a></li>
                        </ul>
                    </li>

                    
                    <li class="dropdown-submenu">
                        <a id="dropdownMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false" class="dropdown-item dropdown-toggle">EXHAUST FANS</a>
                        <ul aria-labelledby="dropdownMenu2" class="dropdown-menu border-0 shadow">
                            <li>
                                <a tabindex="-1" href="#" class="dropdown-item">EF1</a>
                            </li>
                            <li><a href="#" class="dropdown-item">EF2</a></li>
                            <li><a href="#" class="dropdown-item">EF3</a></li>
                        </ul>
                      
                    </li>
                    </ul>
                </li>
                <!-- End Level one -->

            </ul>

        </div>
    </nav>
    <!-- End Navbar -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://kit.fontawesome.com/67aa126bbd.js" crossorigin="anonymous"></script>
</body>

</html>

问题是我不能将鼠标悬停在 CF1、CF2、CF3 等子项上。当我将鼠标移出其父元素(吊扇)时，子菜单消失。

最佳答案

只需添加此 CSS

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

关于javascript - 多级引导导航栏 : Can't hover on children elements，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59549907/

25 4 0
文章推荐： javascript - 如何将 xAxis 标签格式化为 Highcharts 中每个值的日期？
文章推荐： javascript - Storybook js 未找到规则 '@typescript-eslint/no-implicit-any' 的定义
文章推荐： javascript - 在组件中作为 prop 访问调度函数
文章推荐： javascript - 将 json 中的 json 显示为连续并排的 2 个立方体，而不是列表
行者123
个人简介

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

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