单击按钮时的jQuery子菜单下拉菜单 [英] jQuery submenu dropdown when button clicked

问题描述

我有一个简单的菜单系统，我想添加一些功能以使子项目在加载时隐藏，直到单击"+"按钮，然后子菜单才会向下滑动.

I a have a simple menu system and I would like to add functionality to make sub items hide on load until a '+' button is clicked then the submenu slides down.

菜单项是通过wordpress生成的，因此如果菜单显示类".has-dropdown"，则需要添加"+"按钮.到目前为止，我已经整理了以下代码，但是它不起作用:

The menu items are generated through wordpress so I need to add the '+' button if the menu shows the class '.has-dropdown'. I have put together the follow code so far but it's not working:

jsfiddle

$( ".clicktodrop" ).insertAfter( ".has-dropdown" );

$(function() {
   $(".clicktodrop").hover(function() {
       $(this).children("ul.dropdown").slideDown(200);
   }, function() {
       $(this).children("ul.dropdown").slideUp(200);
   });
});

希望如果上面的解释没有道理，jsfiddle应该向您展示我正在尝试实现的目标！谁能看到如何进行这项工作?

Hopefully the jsfiddle should show you what I am trying to achieve if the explanation above doesn't make sense! Could anyone see how to make this work?

推荐答案

$(function() {
    $(".clicktodrop").hover(function() {
        $(this).next(".dropdown").slideDown(200);
    }, function() {
        $(this).next(".dropdown").slideUp(200);
    });
});

小提琴

这篇关于单击按钮时的jQuery子菜单下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！