1

我有一个简单的 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 等中硬编码只是为了让事情正常工作，并且会感谢任何提示。

4

2 回答 2

3

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

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

CSS方式

.sub-menu { display: none; }
于 2012-11-28T15:40:27.240 回答
0

这是我可以为第二部分提出的建议：

在 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.
于 2012-11-28T16:26:08.543 回答