Question

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

这是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（我试图切换＆＃34; ul.sub-menu＆＃34;部分）：

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

WordPress切换边栏SubMenu

2 个答案: