jQuery 的移动导航问题

Question

I created a simple navigation, but it doesn't work on mobile. When you click on the plus symbol or "Book 1 name" the list of links are suppose to appear, but for some reason it doesn't work, and when you click the plus symbol the ex symbol is suppose to appear. The book title should link should work on desktop, but not on mobile. Thanks!

 $(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

You can do this check $(window).width() <= 550 inside the click event rather than attaching the event based on screen-size. Please find the corrected code.

 $('.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

Instead of checking on resize, check the window with inside buttonClickHandler like below

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

Another problem was the specificity of toggleNav css class.

.bookNavigation ul li ul {
   display: none;
}

Above code is more specific than

.toggleNav {
   display: block;
}

So the toggling toggleNav won't work because the 1st one will override this one. For fixing it create a class like the one below and toggle it on click. So that it will be hidden initially and will be removed on click.

.navHidden {
  display: none
}

Check this pin for working example: https://codesandbox.io/s/bold-currying-39w11