Проблемы с мобильной навигацией в jQuery

Question

Я создал простую навигацию, но она не работает на мобильных устройствах.Когда вы нажимаете на символ «плюс» или «Название книги 1», предполагается, что список ссылок появляется, но по какой-то причине он не работает, а когда вы нажимаете на символ «плюс», предполагается, что символ «ex» появляется.Ссылка на название книги должна работать на рабочем столе, а не на мобильном.Спасибо!

$(document).ready(function () { 
	$(window).resize(function() {
       if($(window).width() <= 550) {
        $('.bookName').click(function(e){
            e.preventDefault();
            $('.bookNavigation ul li ul').toggleClass('toggleNav')
            $(this).toggleClass('changeIcon');
        });
       } else {
        $('.bookName').click(function(e){
            return true;
        });
       }
   });
 });

.bookNavigation ul li ul{
    display: flex;
}
.toggleNav{
    display: block;
}

@media only screen and (max-width: 550px) {
    .bookNavigation ul li ul{
        display: none;
    }
    .bookName::before{
        content: '+';
        padding-right: 10px;
    }
    .bookName .changeIcon::before{
        content: '-';
        padding-right: 10px;
    }
}

a{
    text-decoration: none;
}
li{
    list-style: none;
}
.bookNavigation{
    margin-bottom: 100px;
}
.bookName{
    text-transform: uppercase;
    font-size: 30px;
}
li{
    margin-right: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="bookNavigation">
        <ul>
            <li>
                <a href="#" class="bookName">Book 1 Name</a>
                <ul>
                    <li><a href="#">Book 1 Chapter 1</a></li>
                    <li><a href="#">Book 1 Chapter 2</a></li>
                    <li><a href="#">Book 1 Chapter 3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <p>you are in Book 1 Name cover page</p>

Answer 1

Вы можете сделать эту проверку $(window).width() <= 550 внутри события щелчка вместо того, чтобы прикреплять событие в зависимости от размера экрана.Пожалуйста, найдите исправленный код.

$('.bookName').click(function(e) {
  if ($(window).width() <= 550) {
    e.preventDefault();
    $('.bookNavigation ul li ul').toggleClass('toggleNav')
    $(this).toggleClass('changeIcon');
  }
});

.bookNavigation ul li ul {
  display: flex;
}

.bookNavigation ul li ul.toggleNav {
  display: block;
}

@media only screen and (max-width: 550px) {
  .bookNavigation ul li ul {
    display: none;
  }
  .bookName::before {
    content: '+';
    padding-right: 10px;
  }
  .bookName .changeIcon::before {
    content: '-';
    padding-right: 10px;
  }
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.bookNavigation {
  margin-bottom: 100px;
}

.bookName {
  text-transform: uppercase;
  font-size: 30px;
}

li {
  margin-right: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="bookNavigation">
  <ul>
    <li>
      <a href="#" class="bookName">Book 1 Name</a>
      <ul>
        <li><a href="#">Book 1 Chapter 1</a></li>
        <li><a href="#">Book 1 Chapter 2</a></li>
        <li><a href="#">Book 1 Chapter 3</a></li>
      </ul>
    </li>
  </ul>
</nav>
<p>you are in Book 1 Name cover page</p>

Answer 2

Вместо проверки на изменение размера, проверьте окно с внутренним buttonClickHandler, как показано ниже

$(button).on('click', function(){
   if($(window).width() <= 550){
      // Code to toggle list
   }
});

Другая проблема заключалась в специфике класса toggleNav css.

.bookNavigation ul li ul {
   display: none;
}

Выше код более конкретенчем

.toggleNav {
   display: block;
}

Так что переключающий toggleNav не будет работать, потому что первый переопределит этот.Для исправления создайте класс, подобный приведенному ниже, и переключайте его по щелчку.Так что он будет изначально скрыт и будет удален при нажатии.

.navHidden {
  display: none
}

Проверьте этот штифт для рабочего примера: https://codesandbox.io/s/bold-currying-39w11