如何使我的移動菜單按鈕顯示和隱藏導航欄，以及在負數空間中單擊時隱藏

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

這是小提琴

Answer 2

HTML和JS都存在一些錯誤。

首先：您在<li>元素中打開了內部<ul>元素，但在li元素之外將其關閉。 結構錯誤。 它必須在打開的<li>元素內部關閉。

第二：$（document）.ready（）函數未正確關閉：

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