Javascript 下拉菜单 (wp_nav_menu) 不工作

Question

我正在尝试使用我在另一个站点上使用的脚本来让我的导航菜单下拉菜单正确地设置动画。

脚本如下：

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_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>

编辑：添加当前菜单样式：

#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;
                }

Answer 1

在您的脚本中 $(this).parent() 实际上指的是 link.

之前的 li 元素

以下mark-up为例

 <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>

与

$("#menu > div > ul > li > a")

你基本上select<a href="#">Programming</a>，因此

$(this).parent().addClass("selected");

将 class selected 添加到 li 元素，而不是恰好是

的 ul 元素

<ul class="sub-menu" style="">

在您的 mark-up <a href="#">Programming</a> 正下方。您应该将 class selected 添加到 children 而不是 parent.

尝试如下更改脚本

$("#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();
});

编辑

不确定原始菜单的工作原理，但这可能是基于您的 css 定义的解决方案。

Javascript 下拉菜单 (wp_nav_menu) 不工作

Javascript for dropdown menu (wp_nav_menu) not working

javascript

wordpress

jquery

drop-down-menu