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

【问题标题】：jQuery with Wordpress menus - how to hide submenu on page load带有 Wordpress 菜单的 jQuery - 如何在页面加载时隐藏子菜单
【发布时间】：2012-11-28 14:38:42
【问题描述】：

我有一个简单的 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 等中进行硬编码，只是为了让事情正常进行，如果有任何提示，我将不胜感激。

【问题讨论】：

你不能使用 CSS {display:none} 隐藏子菜单并使用 Jquery 显示它们吗？试试api.jquery.com/slideDown
我认为@DejoDekic 的建议可以解决第一个问题。对于第二部分，“如果其中一个子页面被隐藏，则应始终显示子菜单”是什么意思？
这行得通 - 非常感谢。我已经编辑了我的原始问题以纠正我的愚蠢句子 - 我的意思是“如果正在显示子页面之一，则应始终显示子菜单”

标签： jquery wordpress menu

【解决方案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; }

【讨论】：

谢谢 - 这里的问题是菜单在被隐藏之前加载并显示
是的。但是用 css 隐藏它会解决问题
啊是的 - 使用 css 隐藏然后使用 jQuery 显示作为默认操作。谢谢。如果您有任何想法，我还需要弄清楚如何在子菜单页面上默认显示菜单（而不是默认隐藏）？
你可以给每个页面主体标签一个类名来指示页面的类型（或者更好：菜单的状态）并将css更改为 .closed .sub -menu {显示：无；}

【解决方案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.

【讨论】：