Question

在点击主播或点击导航下拉菜单外部时，我一直遇到让我的自适应导航崩溃的问题。我的代码段无法按预期工作。您可以在另一个标签中查看我的网站，并将窗口大小调整为移动视图： http://www.jeremyalexander.webhostingforstudents.com/

选择汉堡包图标或主页锚点后，我的响应式导航会默认关闭。有什么建议吗？

function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
            x.className += " responsive";
            } else {
            x.className = "topnav";
            }
            }

/*
File Name: navigation.css
Date: 03/23/18
Programmer: Jeremy Alexander
*/

/* MOBILE STYLESHEET */

.topnav {
    overflow-y: auto;
    max-height: 100vh;
    background-color: #f4f4f4;
    position: fixed;
    top: 0;
    z-index:2;
}

.topnav a {
  float: left;
  display: block;
  color: #212414;
  text-align: center;
  padding: 24px;
  text-decoration: none;
  font-size: 16px;
}

.active {
  color: #ffffff;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f4f4f4;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #F0B072;
  color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive {position: fixed;}
  .topnav.responsive .icon {
    position: relative;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
    padding: 25px 80px;  
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: fixed;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

@media screen and (min-width: 600px) {
  .topnav {
  overflow: hidden;
  background-color: #f4f4f4;
  position: fixed;
  top: 0;
  width: 100%;
  }
    
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
    
.topnav a {
    padding: none;
    width: 20%;
}    
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

    <!-- Navigation -->
    <nav class="topnav" id="myTopnav">
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>    
            <a href="#" class="active">Home</a>
            <a href="#services">Services</a>
            <a href="#my-work">My Work</a>
            <a href="#about-me">About Me</a>
            <a href="#contact">Contact</a>
        
    </nav>

    <!-- Main content -->
    <main>
        
        <section class="section group" id="services">
            <h2>Services</h2>
            <p>
             Aliquam egestas blandit ultricies. Nullam rhoncus quam ut erat efficitur suscipit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce neque orci, vehicula a justo sit amet, ultrices pellentesque ex. Integer ac velit purus. Morbi lorem neque, vehicula eget ornare quis, venenatis quis risus. Integer vitae volutpat arcu. Suspendisse malesuada sagittis sem. Phasellus malesuada porttitor velit at dapibus. In porta sit amet diam a tempus.

Phasellus nec erat vitae nulla aliquet cursus vel at urna. Duis tempor ut purus non fringilla. Nam ipsum dui, sollicitudin ut mauris interdum, convallis efficitur velit. Suspendisse vehicula nisi eget libero faucibus aliquam. Sed euismod vel risus at egestas. Nam ornare risus tincidunt libero accumsan elementum. Maecenas mattis eros quis magna vestibulum rhoncus. Donec euismod arcu vitae orci maximus tincidunt. Donec pulvinar ornare facilisis. Aenean volutpat sed nisi non volutpat. In lorem arcu, facilisis quis ante eu, molestie aliquam diam. Aliquam gravida convallis mi, sit amet tempus tortor elementum ac. 
            </p>
        </section>
        
        <section class="section group" id="#my-work">
            <h2>My Work</h2>
                        <p>
             Aliquam egestas blandit ultricies. Nullam rhoncus quam ut erat efficitur suscipit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce neque orci, vehicula a justo sit amet, ultrices pellentesque ex. Integer ac velit purus. Morbi lorem neque, vehicula eget ornare quis, venenatis quis risus. Integer vitae volutpat arcu. Suspendisse malesuada sagittis sem. Phasellus malesuada porttitor velit at dapibus. In porta sit amet diam a tempus.

Phasellus nec erat vitae nulla aliquet cursus vel at urna. Duis tempor ut purus non fringilla. Nam ipsum dui, sollicitudin ut mauris interdum, convallis efficitur velit. Suspendisse vehicula nisi eget libero faucibus aliquam. Sed euismod vel risus at egestas. Nam ornare risus tincidunt libero accumsan elementum. Maecenas mattis eros quis magna vestibulum rhoncus. Donec euismod arcu vitae orci maximus tincidunt. Donec pulvinar ornare facilisis. Aenean volutpat sed nisi non volutpat. In lorem arcu, facilisis quis ante eu, molestie aliquam diam. Aliquam gravida convallis mi, sit amet tempus tortor elementum ac. 
            </p>
        </section>
        
        <section class="section group" id="#about-me">
            <h2>About Me</h2>
                        <p>
             Aliquam egestas blandit ultricies. Nullam rhoncus quam ut erat efficitur suscipit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce neque orci, vehicula a justo sit amet, ultrices pellentesque ex. Integer ac velit purus. Morbi lorem neque, vehicula eget ornare quis, venenatis quis risus. Integer vitae volutpat arcu. Suspendisse malesuada sagittis sem. Phasellus malesuada porttitor velit at dapibus. In porta sit amet diam a tempus.

Phasellus nec erat vitae nulla aliquet cursus vel at urna. Duis tempor ut purus non fringilla. Nam ipsum dui, sollicitudin ut mauris interdum, convallis efficitur velit. Suspendisse vehicula nisi eget libero faucibus aliquam. Sed euismod vel risus at egestas. Nam ornare risus tincidunt libero accumsan elementum. Maecenas mattis eros quis magna vestibulum rhoncus. Donec euismod arcu vitae orci maximus tincidunt. Donec pulvinar ornare facilisis. Aenean volutpat sed nisi non volutpat. In lorem arcu, facilisis quis ante eu, molestie aliquam diam. Aliquam gravida convallis mi, sit amet tempus tortor elementum ac. 
            </p>
        </section> 
        
        <section class="section group" id="#contact">
            <h2>Contact</h2>
                        <p>
             Aliquam egestas blandit ultricies. Nullam rhoncus quam ut erat efficitur suscipit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce neque orci, vehicula a justo sit amet, ultrices pellentesque ex. Integer ac velit purus. Morbi lorem neque, vehicula eget ornare quis, venenatis quis risus. Integer vitae volutpat arcu. Suspendisse malesuada sagittis sem. Phasellus malesuada porttitor velit at dapibus. In porta sit amet diam a tempus.

Phasellus nec erat vitae nulla aliquet cursus vel at urna. Duis tempor ut purus non fringilla. Nam ipsum dui, sollicitudin ut mauris interdum, convallis efficitur velit. Suspendisse vehicula nisi eget libero faucibus aliquam. Sed euismod vel risus at egestas. Nam ornare risus tincidunt libero accumsan elementum. Maecenas mattis eros quis magna vestibulum rhoncus. Donec euismod arcu vitae orci maximus tincidunt. Donec pulvinar ornare facilisis. Aenean volutpat sed nisi non volutpat. In lorem arcu, facilisis quis ante eu, molestie aliquam diam. Aliquam gravida convallis mi, sit amet tempus tortor elementum ac. 
            </p>
        </section>

请帮助我了解如何解决此问题。谢谢。

Answer 1

来自MDN web docs：

当元素即将失去焦点时会触发 focusout 事件。此事件与模糊之间的主要区别在于后者不冒泡

因此，每当focusout失去焦点时，您都可以使用myFunction DOM事件来调用nav。只需在myFunction()功能下方添加此行：

document.getElementById('myTopnav').addEventListener("focusout", myFunction);

单击导航项锚点链接

1 个答案: