下拉菜单(wp_导航菜单)的Javascript不工作
我试图使用我在另一个网站上使用的脚本,以使我的导航菜单下拉菜单正确设置动画 以下是脚本:下拉菜单(wp_导航菜单)的Javascript不工作,javascript,jquery,wordpress,drop-down-menu,Javascript,Jquery,Wordpress,Drop Down Menu,我试图使用我在另一个网站上使用的脚本,以使我的导航菜单下拉菜单正确设置动画 以下是脚本: jQuery(window).load(function() { $("#menu > div > ul > li > a").click(function (e) { // binding onclick if ($(this).parent().hasClass('selected')) { $("#menu .selected
jQuery(window).load(function() {
$("#menu > div > ul > li > a").click(function (e) { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#menu .selected ul").slideUp(100); // hiding popups
$("#menu .selected").removeClass("selected");
} else {
$("#menu .selected ul").slideUp(100); // hiding popups
$("#menu .selected").removeClass("selected");
if ($(this).next(".sub-menu").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".sub-menu").children().slideDown(200);
}
}
e.stopPropagation();
});
$("html").click(function () { // binding onclick to body
$("#menu .selected ul").slideUp(100); // hiding popups
$("#menu .selected").removeClass("selected");
});
});
我正在使用的html与我正在使用的其他网站不同,因为我试图使用Wordpress的默认wp\u nav\u menu()
output使其工作。这是一个不同的结构,我不知道要做什么调整才能让它正常工作
wp\U导航菜单的输出:
<nav id="menu" role="navigation">
<div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="menu"><li id="menu-item-163" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-163"><a href="#">Programming</a>
<ul class="sub-menu" style="">
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156" style=""><a href="http://lgtheater.org/wordpress-2014/programming/bakery/">Bakery</a></li>
<li id="menu-item-157" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-157" style=""><a href="http://lgtheater.org/wordpress-2014/programming/lg-cabaret/">LG! Cabaret</a></li>
<li id="menu-item-158" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-158" style=""><a href="http://lgtheater.org/wordpress-2014/programming/mainstage/">Mainstage</a></li>
<li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-155" style=""><a href="http://lgtheater.org/wordpress-2014/programming/outreach/">Outreach</a></li>
</ul>
</li>
<li id="menu-item-164" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-164"><a href="#">Get Involved</a>
<ul class="sub-menu">
<li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a href="http://lgtheater.org/wordpress-2014/get-involved/audition/">Audition</a></li>
<li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160"><a href="http://lgtheater.org/wordpress-2014/get-involved/script-submissions/">Script Submissions</a></li>
<li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-162"><a href="http://lgtheater.org/wordpress-2014/get-involved/volunteer/">Volunteer</a></li>
</ul>
</li>
<li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167"><a href="http://lgtheater.org/wordpress-2014/blog/">Blog</a></li>
<li id="menu-item-165" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-165"><a href="#">About</a>
<ul class="sub-menu">
<li id="menu-item-153" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-153"><a href="http://lgtheater.org/wordpress-2014/about/contact/">Contact</a></li>
<li id="menu-item-151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151"><a href="http://lgtheater.org/wordpress-2014/about/history/">History</a></li>
<li id="menu-item-152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-152"><a href="http://lgtheater.org/wordpress-2014/about/staff/">Staff</a></li>
</ul>
</li>
<li id="menu-item-149" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-149"><a href="http://lgtheater.org/wordpress-2014/donate/">Donate</a></li>
</ul></div
>
</div>
在脚本中,$(this).parent()实际上是指链接之前的li
元素
以下面的分数为例
<nav id="menu" role="navigation">
<div class="menu-main-navigation-container">
<ul id="menu-main-navigation" class="menu">
<li id="menu-item-163" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-163">
<a href="#">Programming</a>
您基本上选择了
,因此
$(this).parent().addClass("selected");
将类所选
添加到li
元素,而不是恰好是的ul
元素
<ul class="sub-menu" style="">
编辑
不确定原始菜单是如何工作的,但这可能是基于css定义的解决方案 请包括样式表。您在哪里有带有id=“menu”
的元素?我在上面添加了当前的样式。带有ID菜单的元素是整个内容的包装器。对不起,忘了包括那个。加上它谢谢你!有时候只需要第二只眼。你的修理工作做得很好。
$(this).parent().addClass("selected");
<ul class="sub-menu" style="">
$("#menu > div > ul > li > a").click(function (e) { // binding onclick
if ($(this).next(".sub-menu").hasClass('selected')) {
$("#menu .selected ul").slideUp(100); // hiding popups
$("#menu .selected").removeClass("selected");
} else {
$("#menu .selected ul").slideUp(100); // hiding popups
$("#menu .selected").removeClass("selected");
if ($(this).next(".sub-menu").length) {
$(this).next(".sub-menu").addClass("selected"); // display popup
$(this).next(".sub-menu").children().slideDown(200);
}
}
e.stopPropagation();
});