我一直试图让我的WordPress响应菜单在点击按钮时进行切换，然而，一旦点击按钮，菜单就会向下滑动，然后立即备份。我想不出哪里出了错。任何帮助都将不胜感激。

下面是我正在使用的代码：

HTML

<nav id="third-menu" class="mobile-menu" role="navigation">

    <button class="menu-toggle">Menu</button>

    <?php wp_nav_menu( array( 
        \'theme_location\' => \'third-menu\', 
        \'menu_class\' => \'third-menu\', 
        \'menu_id\' => \'third-menu-nav\' ) ); ?>

</nav>

@media screen and (max-width: 800px) {


    .menu-toggle, .mobile-menu{
        display: block;
    }


    .first-menu-nav, .second-menu-nav{
        display: none;
    }


    .mobile-menu ul.third-menu-nav,
    .mobile-menu div.third-menu-nav > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }

    .mobile-menu ul {
        margin: 0;
        text-indent: 0;
    }

    .mobile-menu li a,
    .mobile-menu li {
        display:block;
        text-decoration: none;
        text-align: center;
        margin: 0;
    }

    .mobile-menu li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        white-space: nowrap;
    }

    .mobile-menu li a:hover,
    .mobile-menu li a:focus {
        color: #000;
    }

    .mobile-menu ul.third-menu-nav,
    .mobile-menu div.nav-menu > ul {
        display: none;
    }

    .mobile-menu li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }

    .mobile-menu li ul ul {
        top: 0;
        left: 100%;
    }

    .mobile-menu ul li:hover > ul,
    .mobile-menu ul li:focus > ul,
    .mobile-menu .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }

    .mobile-menu li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }

    .mobile-menu li ul li a:hover,
    .mobile-menu li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }

    .mobile-menu .current-menu-item > a,
    .mobile-menu .current-menu-ancestor > a,
    .mobile-menu .current_page_item > a,
    .mobile-menu .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }

    .menu-toggle .toggled-on{
        display: block;
    }


 }

jQuery(document).ready(function ($) {

  $(\'.third-menu-nav\').hide();

  $(\'.menu-toggle\').click(function () {
    $(\'.third-menu-nav\').slideToggle("slow", function () {
        // Animation complete.
    });

  })

})