Блог

Главная - Вопросы по программированию - jQuery переключает, не переключая два дива

jQuery переключает, не переключая два дива

#javascript #html #jquery

Вопрос:

Я работаю над элементом навигации, в котором вы нажимаете кнопку, и открывается панель меню, открывающая ссылки на другие страницы. В настоящее время он скрывает .links divs при загрузке, но не будет переключать .links divs и #menuTitle div. Я также попытался вручную изменить свойства отображения css, но также не смог заставить это работать. Вот мой код:

 $(document).ready(function() {
  $(".links").hide()

  $("#hamburger").on("click", function() {
    $("i").toggle(function() {
      // Changes width of menu bar
      var menuWidth = $("#menu").width() == 700 ? "100px" : "700px";
      $("#menu").animate({
        width: menuWidth
      });

      $('#menuTitle, .links').toggle();
    })
  })
}) 
 #menu {
  background-color: #000;
  width: 100px;
  height: 50px;
  color: #fff;
  overflow: hidden;
}

#hamburger {
  background-color: #000;
  width: 50px;
  height: 50px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex me-5">
  <div class="d-flex justify-content-center align-items-center me-3" id="menu">
    <div class="fs-3" id="menuTitle">Menu</div>
    <div class="links">
      <a class="nav-link links active" href="#">Home</a>
      <a class="nav-link links" href="#">Description</a>
      <a class="nav-link links" href="#">Work Experience</a>
      <a class="nav-link links" href="#">Projects</a>
      <a class="nav-link links" href="#">Education</a>
      <a class="nav-link links" href="#">Certifications</a>
    </div>
  </div>
  <div class="d-flex justify-content-center align-items-center" id="hamburger">
    <a href="#" class="btn">
      <i class="fas fa-bars fa-2x" id="bars"></i>
      <i class="fas fa-times fa-2x" id="times"></i>
    </a>
  </div>
</div>

Комментарии:

1. Я подозреваю, что проблема <a class="links"> в том, что внутри <div class="links">

2. вынул ссылки из тегов a и все еще не работает

3. Я не понимаю, к чему ты клонишь $("i").toggle() . Это устаревший метод обработки событий, который устарел.

4. Вы не должны добавлять обработчики событий внутри других обработчиков событий. Каждый раз, когда вы нажимаете на гамбургер, он добавляет еще один обработчик переключения i .

5. Вы должны использовать $("i").click() и выставить его на улицу $("#hamburger").click() .

Метки: ,