jQuery下拉菜单不起作用

debugcn 发表于 Dev

莎拉·麦克拉克兰（Sarah McLachlane）

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

我在jsfiddle上发布了我的代码，但是由于某种原因在jsfiddle上，jQuery代码不起作用。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"
    });
});

阿迪亚·辛格（Aditya Singh）

试试看：-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"
    });
 });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。