css 下拉菜单在单击链接时关闭，在单击离开时关闭

我想我的菜单关闭时，任何链接被点击，当我点击菜单区以外的相同，我尝试了不同的方式，但不成功，你能帮助我吗？我试图使用javascript，但结果失败了，我仍然是一个初学者，所以我有麻烦。

- 苏丹**

const btnMobile = document.getElementById('btn-mobile');

function toggleMenu(event) {
    if (event.type === 'touchstart') event.preventDefault();
    const nav = document.getElementById('nav');
    nav.classList.toggle('active');
    const active = nav.classList.contains('active');
    event.currentTarget.setAttribute('aria-expanded', active);
    if (active) {
        event.currentTarget.setAttribute('aria-label', 'Fechar Menu');
    } else {
        event.currentTarget.setAttribute('aria-label', 'Abrir Menu');
    }
}

btnMobile.addEventListener('click', toggleMenu);
btnMobile.addEventListener('touchstart', toggleMenu);

我看了各种论坛和课程，但是，由于某种原因，没有一个脚本工作。HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu Mobile</title>
  <link rel="stylesheet" href="menu.css">
</head>

<body>
  <header id="header">
    <a id="logo" href="">Menu</a>
    <nav id="nav">
      <button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">
        <span id="hamburger"></span>
      </button>
      <ul id="menu" role="menu">
        <li><a href="#home_wrapper" class="menu-link">Home</a></li>
        <li><a href="#servico" class="menu-link">Serviços</a></li>
        <li><a href="#paginas" class="menu-link">Páginas</a></li>
        <li><a href="#projetos" class="menu-link">Projetos</a></li>
        <li><a href="#empresas" class="menu-link">Empresas</a></li>
        <li><a href="#cupcode" class="menu-link">Cupcode</a></li>
        <li><a href="#recursos" class="menu-link">Recursos</a></li>
        <li><a href="#contato" class="menu-link">Contato</a></li>
      </ul>
    </nav>
  </header>
  <script src="menu.js"></script>
</body>

</html>

类似这样的东西应该可以用，它是用JQuery实现的。
我自己也是个初学者，所以可能有点太复杂或者别的什么。但是这对我很有效。
它不包含你的类和id名，只是让你看看它是如何工作的。

$(document).mouseup(function (e) {
    var container = $("#nav-toggle");

    if (!container.is(e.target) // if clicked outside
        && container.has(e.target).length === 0)
    {
        container.hide();
        $( "#nav-toggle" ).prop( "checked", false ); //to uncheck
    }
});

$('.i').click(function() { // if i is clicked hide all the links
  $('#nav-li').hide();
 });
 
$('.nav-toggle').click(function() { // if the hamburger is clicked show them again
  $('#nav-li').show();
 });

#navbar {
        text-align: center;
        margin-top: -13px;
        z-index: 999;
        width: 100%;
        font-family: 'Poppins';
        position: sticky;
        top: 0;
        width: 100%;
        height: 80px;
        background-color: #fff
        box-shadow: 10px 10px 20px #fff
    }
    
    .logo {
        letter-spacing: 1px;
        margin-bottom: -10px;
        font-weight: bold;
        margin-left: 10px;
        font-size: 20px;
        text-align: left;
        font-family: 'Poppins';
        padding: 5px;
        text-transform: uppercase;
        color: #000;
    }
    
    
    .nav-toggle {
        display: none;
    }
    
    .nav-toggle-label {
        position: absolute;
        top: 15px;
        right: 20px;
        height: 30px;
        display: flex;
        align-items: center;
    }
    
    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        display: block;
        background: #000;
        height: 2px;
        width: 2em;
        border-radius: 5px;
        position: relative;
    }
    
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        content: '';
        position: absolute;
    }
    
    .nav-toggle-label span::before {
        bottom: 7px;
    }
    
    .nav-toggle-label span::after {
        top: 7px;
    }
    nav {
        cursor: pointer;
        position: absolute;
        text-align: left;
        background: var(--background);
        width: 100%;
        transform: scale(1, 0);
        transform-origin: top;
        transition: transform 400ms ease-in-out;
    }
    
    nav ul {
        padding: 0;
        height: 220px;
        list-style: none;
        background-color: #fff;
    }
    
    nav li {
        margin-bottom: 1em;
        margin-left: 1em;
    }
    
    nav a {
        color: black;
        text-decoration: none;
        font-size: 1.2rem;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity 150ms ease-in-out;
        transition: all 250ms ease-in-out;
        -ms-transition: all 250ms ease-in-out;
        -webkit-transition: all 250ms ease-in-out;
    }
    
    .nav-toggle:checked ~ nav {
        transform: scale(1, 1);
        background-color: #fff;
    }
    
    .nav-toggle:checked ~ nav a {
        opacity: 1;
        transition: opacity 250ms ease-in-out 250ms;
    }
    
    .nav-toggle:checked ~ nav ul {
        background-color: #fff;
    }
    
    .nav-toggle:checked ~ .nav-toggle-label {
        display: none;
    }
    .nav-close-label {
        font-size: 28px;
        position: absolute;
        top: 10px;
        right: 24px;
        display: none;
    }
    
    .nav-toggle:checked ~ .nav-close-label {
        display: block;
        animation: nav3 1s ease;
    }
    .fadeInBottom { animation-name: nav3 }
    @keyframes nav3 {
        from {
            opacity: 0;
        }
        to { opacity: 1 }
    }
    
    .background {
    background-color: white;
    }
    
    .spacer {
    height: 2000px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
<header id="navbar">
    <h1 class="logo">
      <div>
        Logo
      </div>
      </h1>

    
    <input label="" type="checkbox" id="nav-toggle" class="nav-toggle">

     <nav>
       <ul id="nav-li">
         <li class="i"><a href="#">Home</a></li>
         <li class="i"><a href="#">Example</a></li>
         <li class="i"><a href="#">Example</a></li>
         <li class="i"><a href="#">Example</a></li>
         <li class="i"><a href="#">Example</a></li>
       </ul>
     </nav>
  <label for="nav-toggle" class="nav-toggle-label" id="nav-toggle-label">
   <span></span>
  </label>
  <label class="nav-close-label" id="nav-close-label">&#10005;</label>
</header>

<div class="spacer"></div> <!--DONT COPY-->
</div>

css 下拉菜单在单击链接时关闭，在单击离开时关闭

1条答案

相关问题

热门标签

最新问答