jQuery切換類沒有回應

我正在嘗試使用 toggleclass 來構建漢堡選單。我希望它可以通過添加活動類來單擊以顯示選單。默認情況下，我沒有顯示漢堡圖示，然后添加活動類應該使其顯示和可點擊。我已經嘗試了幾種不同的代碼，但它沒有回應我想知道我做錯了什么，任何建議都有幫助！

const menuToggle = document.querySelector('.menu');

$(document).ready(function() {
  $('.card').on('mouseenter', function() {
    $(this).find(".inner-card").toggleClass('active');
  });

  $('.card').on('mouseleave', function() {
    $(this).find(".inner-card").toggleClass('active');
  });

  // #1
  $('.hamburger-menu').on('click', function() {
    $('.hamburger-menu').toggleClass('.active')
  });

  //#2
  $('.hamburger-menu').onclick(function() {
    $('.hamburger-menu').toggleClass('.active')
  });
});

  .hamburger-menu {
  display: none;
}

@media only screen and (max-width: 886px) {
  header {
    display: flex;
    justify-content: space-between;
  }
  .hamburger-menu {
    display: inline-block;
    .menu.active {
      height: 100%;
      width: 350px;
      background: white;
      z-index: 10;
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>


<header>
  <nav class="nav-links">
    <a href="http://" class="nav-branding">TravelSite</a>
    <form id="form">
      <input type="search" class="searchbar" id="query" name="q" placeholder="Search...">
      <button>Search</button>
    </form>
    <ul class="nav-ul">
      <li><a href="http://">Destinations</a></li>
      <li><a href="http://">Blog</a></li>
      <li><a href="http://">About</a></li>
      <li><a href="http://">Contact</a></li>
    </ul>

    <div class="hamburger-menu"> <img src="../static/img/burger-bar.png" alt=""></div>
  </nav>
</header>

uj5u.com熱心網友回復：

你快到了，但你瞄準了錯誤的專案。我對您的 HTML 進行了一些重新排列，并添加了一個類來包含鏈接，這樣您就可以定位它而不是ul. 您的 CSS 中存在一些格式問題，所以我只是將媒體查詢取出并清理了它，您可以將其添加回您需要的任何大小并從那里進行調整。

$('.hamburger-menu').click(function() {
  $('.navItems').toggleClass('active')
});

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: space-between;
}

.hamburger-menu {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0;
}

.hamburger-menu img {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0;
}

.navItems {
  display: none;
  height: 100%;
  width: 350px;
  color: black;
  background: white;
  z-index: 10;
}

li a {
  color: black;
}

.active {
  display: block;
  height: 100%;
  width: 350px;
  background: white;
  z-index: 10;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <nav class="nav-links">
    <a href="http://" class="nav-branding">TravelSite</a>
    <form id="form">
      <input type="search" class="searchbar" id="query" name="q" placeholder="Search...">
      <button>Search</button>
    </form>
    <div class="hamburger-menu">
      <img src="https://i.imgur.com/WbNu8xl.jpeg" alt="">
      <div class="navItems">
        <ul>
          <li><a href="http://">Destinations</a></li>
          <li><a href="http://">Blog</a></li>
          <li><a href="http://">About</a></li>
          <li><a href="http://">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

標籤：html jQuery css 切换

上一篇：如何在自動完成回呼之外訪問jQueryUI自動完成建議？

下一篇：單擊Jquery時禁用或激活默認卡