Javascript下拉菜单（wp_nav_menu）不工作 [英] Javascript for dropdown menu (wp_nav_menu) not working
本文介绍了Javascript下拉菜单（wp_nav_menu）不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用另一个网站上使用的脚本，让我的导航菜单下拉菜单正确地动画化。脚本：
jQuery（window）.load（function（）{
$ （#menu> div> ul> li> a）click（function（e）{// binding onclick
if（$（this）.parent（）。hasClass（'selected' ）$ {
$（＃menu .selected ul）。slideUp（100）; //隐藏弹出窗口
$（＃menu .selected）。removeClass（selected）;
} else {
$（＃menu .selected ul）。slideUp（100）; //隐藏弹出窗口
$（＃menu .selected）removeClass（selected）;
if（$（this）.next（。子菜单）。length）{
$（this）.parent（）。addClass（selected）; //显示弹出式
$（this）.next（子菜单）。children（）。slideDown（200）;
}
}
e.stopPropagation（）;
}）;
$（html） .click（function（）{// bind onclick to body
$（＃menu .selected ul）。slideUp（100）; //隐藏弹出窗口
$（＃menu .selected）。removeClass（selected）;
}）;
}）;
我正在使用的html与其他网站不同， '尝试使用Wordpress'默认 wp_nav_menu（）输出使其工作。这是一个不同的结构，我无法确定哪些调整使其正常工作。
输出wp_nav_menu： / p>
< nav id =menurole =navigation>
< div class =menu-main-navigation-container>< ul id =menu-main-navigationclass =menu>< li id =menu-item-163 class =menu-item menu-item-type-custom-item-item-object-custom menu-item-have-children menu-item-163< a href =＃> Programming< / a> ;
< ul class =子菜单style =>
< li id =menu-item-156class =menu-item menu-item-type-post_type menu-item-object-page menu-item-156style =>< a href =http://lgtheater.org/wordpress-2014/programming/bakery/>面包店< / a>< / li>
< li id =menu-item-157class =menu-item menu-item-type-post_type menu-item-object-page menu-item-157style =>< a href =http://lgtheater.org/wordpress-2014/programming/lg-cabaret/> LG！歌厅< / A>< /锂>
< li id =menu-item-158class =menu-item menu-item-type-post_type menu-item-object-page menu-item-158style =>< a href =http://lgtheater.org/wordpress-2014/programming/mainstage/> Mainstage< / a>< / li>
< li id =menu-item-155class =menu-item menu-item-type-post_type menu-item-object-page menu-item-155style =>< a href =http://lgtheater.org/wordpress-2014/programming/outreach/> Outreach< / a>< / li>
< / ul>
< / li>
< li id =menu-item-164class =menu-item menu-item-type-custom menu-item-object-custom menu-item-have-children menu-item-164> ;< a href =＃> Get Involved< / a>
< ul class =子菜单>
< li id =menu-item-161class =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-160class =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提交< / a>< / li>
< li id =menu-item-162class =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-167class =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-165class =menu-item menu-item-type-custom menu-item-object-custom menu-item-have-children menu-item-165> ;< a href =＃>关于< / a>
< ul class =子菜单>
< li id =menu-item-153class =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-151class =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-152class =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-149class =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>
编辑：添加当前菜单样式：
#menu {
float：right;
position：relative;
顶部：25px;
}
#menu> div> ul> li {
display：inline-block;
text-align：center;
padding：0 1em;
}
#menu> div> ul> li.menu-item-have-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;
}
解决方案
在您的脚本 $（this）.parent（）实际上是指链接前的 li 元素。
采取以下标记，例如
< nav id =menurole =navigation >
< div class =menu-main-navigation-container>
< ul id =menu-main-navigationclass =menu>
< li id =menu-item-163class =menu-item menu-item-type-custom menu-item-object-custom menu-item-have-children menu-item-163> ;
< a href =＃>编程< / a>
与
$（＃menu> div> ul> li> a）
您基本上选择< a href =＃>编程< / a> ，因此
$（本）.parent（）addClass（ 选择）。
将类选择添加到 li 元素，而不是 ul 元素恰好是
< ul class =子菜单style =>
右下方< a href =＃>一个> 在您的标记。您应该将 c> c> c
尝试更改脚本如下
$（＃menu> div> ul> li> a）点击（function（e）{//绑定onclick
if（$（this）.next（。子菜单）。hasClass（'selected'））{
$（＃menu .selected ul）。slideUp（100） ; //隐藏弹出窗口
$（＃menu .selected）。removeClass（selected）;
} else {
$（＃menu .selected ul）。slideUp 100）; //隐藏弹出窗口
$（＃menu .selected）。removeClass（selected）;
if（$（this）.next（子菜单）。 ）{
$（this）.next（。子菜单）。addClass（selected）; //显示弹出窗口
$（this）.next（子菜单） .children（）。slideDown（200）;
}
}
e.stopPropagation（）;
}）;
编辑
不知道原始菜单如何工作，但这可能是基于您的css定义的解决方案。
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. 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:
<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.
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
$(this).parent().addClass("selected");
adds the class selected to li element, not the ul element which happens to be
<ul class="sub-menu" style="">
right below <a href="#">Programming</a> in your mark-up. You should be adding the class selected to children not to parent.
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.
这篇关于Javascript下拉菜单（wp_nav_menu）不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
