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隐藏菜单项会导致菜单短暂显示，这是不可接受的。

要添加问题，理想情况下，如果正在显示其中一个子页面，则应始终显示子菜单。我很乐意在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; }

Answer 2

这是一个黑客，我可以建议第二部分：

在header.php中（通常应该定义/加载菜单），

    0.v) Set a css (as above) to hide all the sub-menus by default.
    i) Check if the page is a sub-page (http://mattvarone.com/wordpress/wordpress-check-page-parent/)
    ii) If Yes, set a class in the submenu for this page to show it.
        For this, you may have to change the naming convention of ids of the sub-menu items.
       They may be named as menu-item-<PageId>. In that case you may just add this to show (only) this submenu already : $('menu-item' + currentPageId).parent().show(); <-- Submenus will be enabled via javascript.

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

2 个答案: