[英]Javascript for dropdown menu (wp_nav_menu) not working
I am attempting to use a script I'm using on another site to get my nav menu drop-down to animate properly. 我正在尝试使用在另一个网站上使用的脚本来使导航菜单下拉菜单正确地设置动画。
Here is the script: 这是脚本:
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");
});
});
The html I'm working with is different than that other site I have this working on, as I'm attempting to use Wordpress' default wp_nav_menu()
output to make it work. 我正在使用的html与我正在处理的其他网站不同,因为我试图使用Wordpress的默认
wp_nav_menu()
输出来使其正常工作。 It's a different structure, and I can't figure out what adjustments to make to get it to work properly. 这是一种不同的结构,我无法弄清楚要使其正常工作需要进行哪些调整。
Output of wp_nav_menu: wp_nav_menu的输出:
<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>
EDIT: Adding current menu styles: 编辑:添加当前菜单样式:
#menu {
float: right;
position: relative;
top: 25px;
}
#menu > div > ul > li {
display: inline-block;
text-align: center;
padding: 0 1em;
}
#menu > div > ul > li.menu-item-has-children a:after {
content: " \f107";
font-family: FontAwesome;
}
#menu li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
#menu li a:hover {
color: #F73987;;
}
#menu > div > ul > li > ul {
display: none;
}
#menu > div > ul > li > ul.selected {
display: inline;
}
In your script $(this).parent()
actually refers to li
element before the link. 在您的脚本中,
$(this).parent()
实际上在链接之前引用li
元素。
Take the following mark-up for instance 以以下标记为例
<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>
With 用
$("#menu > div > ul > li > a")
You basically select <a href="#">Programming</a>
, thus 您基本上选择了
<a href="#">Programming</a>
,因此
$(this).parent().addClass("selected");
adds the class selected
to li
element, not the ul
element which happens to be 将
selected
的类添加到li
元素,而不是恰好是的ul
元素
<ul class="sub-menu" style="">
right below <a href="#">Programming</a>
in your mark-up. 在标记中
<a href="#">Programming</a>
正下方。 You should be adding the class selected
to children not to parent. 您应该将
selected
的班级添加到孩子而不是父级。
Try changing the script as follows 尝试如下更改脚本
$("#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();
});
EDIT 编辑
Not sure how the original menu works, but this may be a solution based on your css definitions. 不确定原始菜单的工作方式,但这可能是基于您的CSS定义的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.