javascript - jquery 下拉菜单不起作用

Question

我知道 wordpress 具有下拉功能，但由于某些原因，它在当前主题上已损坏，我需要它才能再次使用。我当前的代码有效，但是当我单击父菜单项时，它会打开所有子菜单。我只需要打开点击的元素。

我在 jsfiddle 上发布了我的代码，但出于某种原因，jquery 代码在 jsfiddle 上不起作用。 <强> jsfiddle

HTML

<ul id="menu-menu" class="navlinks"><li id="menu-item-257" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-257"><a href="#">Home</a></li>
<li id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-55"><a href="#">Menu Item</a></li>
<li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-54"><a href="#">1</a>
<ul class="sub-menu">
<li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-82"><a href="#">Menu Item</a></li>
</ul>
</li>
<li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-83"><a href="#">Menu Item</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-56"><a href="#">Menu Item</a>
<ul class="sub-menu">
<li id="menu-item-296" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-296"><a href="#">1</a></li>
</ul>
</li>
<li id="menu-item-57" class="accessories menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-57"><a href="#">Accessories</a>
<ul class="sub-menu">
<li id="menu-item-320" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-320"><a href="#">1</a></li>
<li id="menu-item-319" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-319"><a href="#">2</a></li>
<li id="menu-item-317" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-317"><a href="#">3</a></li>
<li id="menu-item-318" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-318"><a href="#">4</a></li></ul>
</li>
</ul>

JQuery:

 $(document).ready(function() {
    $(".accessories").click(function() { //When trigger is clicked...

    //Following events are applied to the subnav itself (moving subnav up and down)
    $(this).parent().find(".sub-menu").slideDown('fast').show(); //Drop down the subnav on click

    $(this).parent().hover(function() {
    }, function(){  
        $(this).parent().find(".sub-menu").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
    });

    //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() { 
        $(this).addClass("subhover"); //On hover over, add class "subhover"
    }, function(){  //On Hover Out
        $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });
});

Answer 1

试试这个:- http://jsfiddle.net/adiioo7/5jA3C/2/

JS:-

$(document).ready(function() {
    $(".menu-item").click(function() { //When trigger is clicked...

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).find(".sub-menu").slideDown('fast').show(); //Drop down the subnav on click

        $(this).hover(function() {
        }, function(){  
            $(this).find(".sub-menu").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() { 
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){  //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });
 });