jQuery 与 Wordpress 菜单 - 如何在页面加载时隐藏子菜单

Question

我有一个简单的 Wordpress 主题，其侧边栏菜单包含主菜单项和子菜单项。菜单出现在所有页面上。这是菜单的呈现方式:

<li id="menu-item-55" class="menu-item "><a href="?page_id=22">Main Menu Item 1</a></li>
<li id="menu-item-120" class="menu-item "><a href="#">Main Menu Item 2</a>
<ul class="sub-menu">
    <li id="menu-item-119" class="menu-item"><a href="?page_id=101">Sub Menu Item 1</a></li>
    <li id="menu-item-118" class="menu-item"><a href="?page_id=104">Sub Menu Item 2</a></li>
    <li id="menu-item-117" class="menu-item"><a href="?page_id=109">Sub Menu Item 3</a></li>
</ul>
</li>
<li id="menu-item-53" class="menu-item "><a href="?page_id=26">Main Menu Item 3/a></li>

我使用一些简单的 jQuery 来切换子菜单项:

    $(document).ready(function() {
        $("#menu-item-120").click(function() {
            $('.sub-menu').slideToggle('medium');
        });
    });

这基本上可以满足我的要求，但有一个小问题 - 我需要在页面加载时最初隐藏子菜单。页面加载后使用 jQuery 隐藏菜单项会导致菜单短暂显示，这是 Not Acceptable 。

更糟糕的是，理想情况下，如果正在显示子页面之一，则应始终显示子菜单。我很高兴在 ids 等中进行硬编码，只是为了让事情正常工作，并且如果有任何提示，我将不胜感激。

Answer 1

您应该按照 Dejo Dekic 的建议使用 CSS 来执行此操作。或者你可以在这里添加 hide() :

$(document).ready(function() {
    $(".sub-menu").hide();
    $("#menu-item-120").click(function() {
        $('.sub-menu').slideToggle('medium');
    });
});

CSS 方式

.sub-menu { display: none; }