Question

我正在尝试在我的网站顶部实现一个水平导航栏，该栏会在用户浏览页面时自动隐藏。我目前已将其设置为一旦用户靠近页面顶部就会显示栏，并在用户使用栏时继续显示，但是，我无法在用户显示栏时显示浏览子菜单项。我试图为子菜单项实现“mouseenter”和“mouseout”功能，但我没有找到有效的配置。

HTML代码：

<body>
    <div id="nav_menu">
        <div class="container">
            <nav>
                <a id="home" href="random">G</a>
                <div id="links">
                    <a class="nav_link" href="random2">Gutenberg</a>
                    <div id="dropdown_gutenberg" class="dropdown">
                        <a class="nav_link_dropdown" href="random5">Dropdown 1</a>
                    </div>
                    <a class="nav_link" href="random3">Printing Techniques</a>
                    <a class="nav_link" href="random4">Early Typographers</a>
                </div>
            </nav>
        </div>
    </div>
</body>

JavaScript代码（使用1.9 JQuery）：

function hidebar(){
document.getElementById("nav_menu").classList.add("hide_nav");
var main_nav = document.getElementsByClassName("nav_link");
for (var i = 0; i < main_nav.length; i++){
    main_nav[i].style.paddingBottom = "18px";
}}

function showbar(){
document.getElementById("nav_menu").classList.remove("hide_nav");
var main_nav = document.getElementsByClassName("nav_link");
for (var i = 0; i < main_nav.length; i++){
    main_nav[i].style.paddingBottom = "11px";
}}

function listenToMove(evt){
if (!nav_active && evt.pageY < 20){
    showbar();
    nav_active = true;
}
else if (nav_active && evt.pageY < 53){
    showbar();
    nav_active = true;
}
else if (nav_active && in_dropdown){
    showbar();
    nav_active = true;
}
else {
    hidebar();
    nav_active = false;
}}

var nav_active = false;

var in_dropdown = false;

var dropdowns = document.getElementById("dropdown");

document.addEventListener('mousemove', listenToMove);

for (i = 0; i < dropdowns.length; i++){
    document.dropdowns[i].addEventListener("mouseenter", function()
    {in_dropdown=true;});
    document.dropdowns[i].addEventListener("mouseout", function()
    {in_dropdown=false;});}

当前实施的JSFiddle： https://jsfiddle.net/JGGoobers/Lz2a1xLg/#&togetherjs=F3h3yxHnQG

感谢任何帮助！

当鼠标悬停在子菜单项上时，防止主导航栏隐藏

0 个答案: