簡體   English   中英

JS.toggle 導航欄

[英]JS .toggle navigation bar

抱歉,我無法理解這里出了什么問題。 我正在嘗試從一個站點中獲取一個現有的導航欄並在另一個站點上實現它,但我嘗試過的沒有任何工作。 我已經設法挽救了它...

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>

好的,我剛剛發現了原因,我覺得很愚蠢:) 導航欄 ID 的設置與代碼中的設置不同,但現在一切正常!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM