JS.切换导航栏



对不起,我无法理解这里出了什么问题。我正试图从一个网站上获取一个现有的导航栏,并在另一个网站中实现它,但我尝试过的都不起作用。我设法从中抢救了这个…

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>

好吧,我刚刚发现了原因,我觉得很愚蠢:(Navbar ID的设置与代码中的不同,但现在都在工作!

相关内容

  • 没有找到相关文章

最新更新