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

Question

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

研究了一下好像只能通过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 秒然后消失。没有给用户太多时间从下拉列表中选择一个选项!啊哈。

我知道这很明显我错过了。如有任何帮助，我们将不胜感激。

Answer 1

从 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();
});

Here is the fiddle