【问题标题】:JS .toggle navigation barJS .toggle 导航栏
【发布时间】:2020-04-28 22:18:56
【问题描述】:

抱歉,我无法理解这里出了什么问题。我正在尝试从一个站点中获取一个现有的导航栏并在另一个站点上实施它,但我尝试过的任何方法都没有奏效。我已经设法从中挽救了……

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>

【问题讨论】:

  • 是否有任何控制台错误?你能分享生成的 HTML 而不是 PHP 代码吗?我们无法告诉您现在实际使用的是什么 HTML。
  • 您可以使用 .toggleClass() 来避免所有这些条件
  • 嗨@Daniel我已经更新了代码:)
  • 另外,没有控制台错误
  • @JoelHager 是的,一旦我得到它的工作,我将摆脱条件......

标签: javascript jquery css navigation


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 2018-04-10
    • 1970-01-01
    • 1970-01-01
    • 2015-11-28
    • 2018-10-12
    • 2022-01-03
    • 2021-10-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多