jQuery与WordPress的菜单 - 如何隐藏页面加载子菜单

我有一个简单的WordPress主题与侧栏菜单包含主菜单项和子菜单项。菜单出现在所有页面上。这是菜单如何呈现：jQuery与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在页面加载时隐藏菜单项会导致菜单短暂显示，这是不可接受的。

若要添加到问题，理想情况下，子菜单应始终显示，如果其中一个子页面正在显示。我很高兴在ID等硬编码只是为了让事情工作，并会感激任何提示。

来源

2012-11-28 Christian Mayne

难道你不能只使用CSS {display：none}隐藏你的子菜单并使用Jquery显示它们吗？尝试http://api.jquery.com/slideDown –

我认为@DejoDekic的建议可以解决第一个问题。对于第二部分，您的意思是“如果其中一个子页面隐藏，子菜单应该始终显示”。 –

这是有效的 - 非常感谢。我编辑了我原来的问题来纠正我的愚蠢的句子 - 我的意思是说“子菜单应该始终显示，如果其中一个子页面正在显示” –

您应该按照Dejo Dekic的建议使用CSS来做到这一点。或者你也可以添加隐藏（）在这里：

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

的CSS方式

.sub-menu { display: none; }

来源

2012-11-28 15:40:27 nxtwrld

感谢您 - 这里的问题是菜单加载，并显示，之前被隐藏 –

是的。但隐藏它与CSS将解决问题 – nxtwrld

啊是的 - 隐藏与CSS，然后使用jQuery显示作为默认操作。谢谢。如果您有任何想法，我还需要弄清楚如何在子菜单页面上默认显示菜单（而不是默认隐藏）？ –

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

在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-28 16:26:08

jQuery与WordPress的菜单 - 如何隐藏页面加载子菜单

回答

相关问题