WordPress 切换侧边栏子菜单

Question

我有一个 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>

Answer 1

原来，由于 li 元素一直在等待点击，所以它应用于整个元素：

li Parent Object: Inspect Element selection

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

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();
    });
});

Answer 2

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

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