WordPress切换边栏SubMenu

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