JS .toggle 导航栏

Question

抱歉，我无法理解这里出了什么问题。我正在尝试从一个站点获取现有的导航栏并在另一个站点上实施它，但我尝试过的任何方法都不起作用。我设法从中挽救了这个...

Java 脚本

 $(function() {
$('#menu-toggle').click(function(e) {
    $('#menu-main-menu').slideToggle('fast');

    var toggleIcon = $('#menu-toggle i');
    if((toggleIcon).is('.fa-bars')) {
        toggleIcon.addClass('fa-times')
        toggleIcon.removeClass('fa-bars')
    } else {
        toggleIcon.removeClass('fa-times')
        toggleIcon.addClass('fa-bars')

    }
});

代码

<div class="container-body">
        <div class="logo">
            <div id="menu-toggle" class="pull-left">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div>
            <a href="<?php echo home_url(); ?>"><?php if(get_theme_mod('site_logo')) { ?><img src="<?php echo get_theme_mod('site_logo'); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></a><?php } else { ?><h1 class="site-title"><?php bloginfo('name') ?></h1></div><?php } ?>
        <nav class="navbar custom-nav" id="top-menu"><?php wp_nav_menu(array('theme_location' => 'top-menu')); ?></nav>
    </div>

所以，我有一份可以使用的副本，但在多次尝试查看它之后，我就是想不通。目前发生的事情是当你点击它时没有任何反应。而在另一个站点上，它会向下折叠。我什至从那个网站复制了旧的 jQuery 看看它是否有效但没有希望。如果有人可以提供帮助，那就太棒了！

更新**

这是完整的生成代码。

<nav class="navbar custom-nav" id="top-menu">
<div class="container-fluid">
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="">Massage At Work</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="">Treatments</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="">Gift Cards</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="">Team</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="">Contact</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="">Feedback</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="">Book</a></li>
<li id="menu-item-58" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-58"><a href=""></a></li><li class="social-icon"><a href=""><i class="fa fa-facebook social" aria-hidden="true"></i></a></li>
<li id="menu-item-59" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-59"><a href=""></a></li><li class="social-icon"><a href=""><i class="fa fa-fa-instagram" aria-hidden="true"></i></a></li>
</ul></div></div></nav>

Answer 1

好吧，我刚刚找到原因，我觉得自己很愚蠢 :) 导航栏 ID 的设置与代码中的不同，但现在一切正常！

JS .toggle 导航栏

JS .toggle navigation bar

javascript

css

navigation

jquery