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>