jQuery 的移动导航问题

Question

我创建了一个简单的导航，但它在移动设备上不起作用。当您单击加号或“Book 1 name”时，链接列表应该会出现，但由于某种原因它不起作用，而当您单击加号时，会出现 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>