使用 JavaScript 切换菜单

toggle menu with javascript

本文关键字：菜单 JavaScript 使用      更新时间：2023-09-26

我在wordpress上使用的主题之一，如果父菜单下有子菜单，则使用切换菜单。

这是当前的 js 代码

    var navItemDropdown = $('#nav li .dropdown');
navItemDropdown.each(function(){
    thisDropdown = $(this);
    $(this).parent().prepend('<span class="sub-nav-toggle"></span>');
});
$('body').on('click','.sub-nav-toggle',function(event){
    $(this).parents('li').toggleClass('active');
    thisDropdown = $(this).parents('li').find('.dropdown');
    thisDropdown.slideToggle('fast');
    return false;
});
如果有

子菜单，则会<span class="sub-nav-toggle"></span>添加它。

具有子菜单的菜单代码变为这样

    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-22"><span class="sub-nav-toggle"></span><a href="#">About Us</a>
<section class="dropdown"><ul>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="page_id=6">Who we are</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="page_id=7">Our Vision</a></li>
</ul></section>
</li>

我想实现的不是注入<span class="sub-nav-toggle"></span>，而是在 href 标签中插入 class="sub-nav-toggle"。这意味着<a>标签将变成这样 

<a class="sub-nav-toggle" href="#">About Us</a>

有一种方法可以通过 Wordpress 菜单为菜单添加类，但它只在标签内添加了类<li>而不是<a>标签，所以它不起作用，也不能那样做。

请帮帮我。谢谢。

我认为您需要更改此设置：

$(this).parent().prepend('<span class="sub-nav-toggle"></span>');

对此：

$(this).prev().addClass('sub-nav-toggle');
相关文章：