WordPress切换侧边栏子菜单

WordPress Toggle Sidebar SubMenu

本文关键字：菜单 侧边栏 WordPress      更新时间：2023-09-26

我有一个WordPress网站，侧边栏中有一个菜单。我正在尝试切换"子菜单"部分。切换有效，但是当单击子菜单项本身而不仅仅是父菜单项时，它会切换子菜单，因此子菜单项的链接不起作用。

这是jQuery代码：

jQuery(document).ready(function(){
    jQuery('#sidebar .menu .sub-menu').hide();
    jQuery('li.menu-item-has-children').click(function() {
        jQuery(this).find('.sub-menu').toggle();
        return false;
    });
});

这是 HTML（我正在尝试切换"ul.sub-menu"部分）：

<aside id="sidebar">
    <div id="nav_menu-6" class="widget widget_nav_menu"><h3>Athletics</h3>
        <div class="menu-athletics-container">
            <ul id="menu-athletics" class="menu">
                <li id="menu-item-641" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-32 current_page_item menu-item-641"><a href="http://web2.gradelink.com/747/athletics/">Athletics</a></li>
                <li id="menu-item-664" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-664 parent"><a href="#">Sports</a>
                    <ul class="sub-menu" style="display: none;">
                        <li id="menu-item-665" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-665"><a href="http://web2.gradelink.com/747/athletics/baseball/">Baseball</a></li>
                        <li id="menu-item-666" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-666"><a href="http://web2.gradelink.com/747/athletics/basketball/">Basketball</a></li>
                        <!-- ... -->
                    </ul>
                </li>
                <li id="menu-item-675" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-675"><a href="http://web2.gradelink.com/747/athletics/athletic-forms-resources/">Athletic Forms &amp; Resources</a></li>
                <!-- ... -->
            </ul>
        </div>
    </div>
</aside>

事实证明，由于 li 元素正在等待点击，它应用于整个元素：

li 父对象：检查元素选择

我通过将单击应用于链接本身，然后使用父级和子级回溯和切换子菜单来修复它。

jQuery(document).ready(function(){
    jQuery('#sidebar .menu .sub-menu').hide();
    jQuery('#sidebar .menu-item-has-children a').click(function() {
        jQuery(this).parent().children('.sub-menu').toggle();
    });
});

您可以使用children来选择具有所需类的任何子元素：

$('sub-menu').hide();
$('.menu').children().click(function(){
    event.preventDefault();
    $(this).children('.sub-menu li').slideToggle('slow');     
});
相关文章：