如何让我的移动菜单按钮显示和隐藏导航栏，以及在负空间中单击时隐藏

How do I make my mobile menu button reveal and hide the navigation bar as well as hide on click in negative space

本文关键字：隐藏 单击 空间 导航 我的 移动 菜单 显示 按钮      更新时间：2023-09-26

我一直在尝试制作一个响应式网站，其中大部分都已排序，但我很难使菜单按钮（显示在媒体查询指定的设备上）显示和隐藏导航栏。

经过研究，似乎唯一的方法是通过JS，这是正确的吗？

无论如何，当涉及到JS时，我非常糟糕，但我把它放在我相信它会起作用的地方。下面是代码片段。所以这个想法是，当单击".menu-icon"时，菜单将下拉（或在这种情况下淡入）并在第二次单击等时恢复为隐藏。

http://jsfiddle.net/af57r1to/

<div id="logo">
  <a href="#">
    <img class="logo" src="images/logo.png" alt="Logo" style="width:200px;height:100px" />
  </a>
  <a class="menu-icon" href="#menu">&#57349;</a>
  <br></br>
</div>
<div class="navbar">
  <ul class="navbar cf">
    <li><a href="index.html">HOME</a>
    </li>
    <li><a href="#">SECTIONS</a>
      <ul>
        <li><a href="retail.html">RETAIL </a>
        </li>
        <li><a href="#">HOTEL</a>
        </li>
        <li><a href="#">RESTAURANT</a>
        </li>
        <li><a href="#">SHOPPING</a>
        </li>
      </ul>
      <li><a href="how.html">HOW IT WORKS</a>
      </li>
      <li><a href="#">OUR EXPERIENCE</a>
      </li>
      <li><a href="#">TESTIMONIALS</a>
      </li>
      <li><a href="#">NEWS</a>
      </li>
      <li><a href="">CONTACT US</a>
      </li>
  </ul>
</div>
<br />

$(document).ready(function () {
    $('.menu-icon').click(function () {
        $('.navbar').fadeToggle(); 
    });  
});

目前，它似乎淡入导航约0.3秒，然后消失。没有给用户太多时间从下拉列表中选择一个选项！啊哈。

我知道这将是我错过的明显的东西。任何关于它的帮助将不胜感激。

从navbar cf中删除类navbar解决了切换问题，但搞砸了样式。因此，为您的导航栏提供一个 ID 并切换它。

<div class="navbar" id='navbarID'>
    <ul class="navbar cf">
        <li><a href="index.html">HOME</a>

和

$('.menu-icon').click(function () {
    $('#navbarID').fadeToggle();
});

这是小提琴

你在HTML和JS中都有一些错误。

首先：您在<li>元素中打开了内部<ul>元素，但在 li 元素外部关闭了它。结构错误。它必须在打开的<li>元素内关闭。

第二：$（document）.ready（） 函数未正确关闭：

$(document).ready(function () {
    $('.menu-icon').click(function () {
        $('.navbar').fadeToggle();
    });
});
相关文章：