带有水平子菜单栏显示/隐藏的导航栏下拉菜单

Question

引导程序 4.3.1 我创建了一个测试页面，它有一个带有子菜单的菜单栏。当鼠标悬停在菜单上时，会出现一个三角形指针，表示选择。用户应该能够将鼠标移动到子菜单栏来选择子菜单。单击菜单（具有子菜单）时，子菜单栏（和三角形指针）应固定在该位置，除非选择了子菜单或其他（顶部）菜单。问题是在通过添加/删除类来维护悬停选择时，我还更改了子菜单的样式，如下面的屏幕截图所示？

TIA

下面是两张截图：

html：

  <nav class="navbar navbar-expand-md navbar-dark ">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menubar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse" id="menubar">
                    <ul class="nav navbar-nav">
                        <li class="nav-item ">
                            <a class="nav-link" href="#">Menu1</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link" data-toggle="dropdown" href="#">Menu2</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Submenu1</a></li>
                                <li><a href="#">Submenu2</a></li>
                                <li><a href="#">Submenu3</a></li>
                              
                            </ul>
                        </li>
                      
                    </ul>
                </div>
            </nav>

CSS：

@media (max-width: 767px) {
    .navbar-collapse {
        background-color: #565149;
    }
}
#menubar ul {
    height: 44px;
    padding-top: 5px;
}
#menubar .nav-link {
    font-size: 14px;
    padding: 8px 50px 0 0 !important;
    color: white !important;
}
    #menubar .nav-link:focus,
    #menubar .nav-link:hover,
    #menubar .nav-link:visited {
        color: white !important;
    }
    #menubar .navbar{
        padding-left: 0 !important;
    }
.navbar.navbar-dark,
.navbar.navbar-light {
    height: 44px; 
    margin: 0 15%;
}

nav.navbar .navbar-nav li.nav-item.active:after{
    content: "";
    position: relative;
    margin-left: -31px;
    left: 50%;
    bottom: 15px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
}
/*submenu*/
#menubar li.dropdown.show {
    position: static;
}
    #menubar li.dropdown.show .dropdown-menu {
        display: table;
        width: 100%;
        text-align: center;
        left: 0;
        right: 0;
        margin: 0;
    }

.dropdown-menu > li {
    display: table-cell;
    padding-top: 6px;
}
.dropdown-menu > li a{
    font-weight:600;
}
    .dropdown-menu > li a:hover {
        text-decoration: none;
    } 

js：

  $("#menubar li.dropdown>a.nav-link").hover(function () { $(this).closest("li").addClass("active show") },
            function () { $(this).closest("li").removeClass("active show") });

Answer 1

我添加了更多 js 代码来管理菜单栏/子菜单栏的状态，如下所示。不要认为这是最好的解决方案，但有效：

 var clicked = false;
        $("#menubar li.dropdown>a.nav-link").hover(function () {
            
            var val = $("#clickstatus").val() + "; hover:on;" + (clicked ? "clicked" : "not");
            $("#clickstatus").val(val);
            if (!clicked)
                $(this).closest("li").addClass("active show");
        },
            function () {
                var val = $("#clickstatus").val() + "; hover:off;" + (clicked ? "clicked" : "not");
                $("#clickstatus").val(val);
                if (!clicked)
                    $(this).closest("li").removeClass("active show");
            });

        $("#menubar li>a.nav-link").on("click", function (e) {
            e.preventDefault();
            e.stopPropagation();

            var $li = $(this).closest("li");
           
            if (!$li.hasClass("dropdown")) {
                clicked = false;
                $("#menubar li.dropdown").removeClass("active show");
                $("#menubar li.dropdown").data("show", false);
                $("#clickstatus").val("clicked=false; not a dropdown. remove active&show");
            } else {
                if ($li.data("show")) {
                    clicked = false;
                    $li.removeClass("active show");
                    $li.data("show", false);
                    $("#clickstatus").val("clicked=false; a dropdown. is active, remove self active&show");
                } else {
                    clicked = true;
                    $("#menubar li.dropdown").removeClass("active show");
                    $li.addClass("active show");
                    $li.data("show", true);
                    $("#clickstatus").val("clicked=true; a dropdown. not active, remove then add active&show");
                }
            }
        });