jQuery 单击按钮时的子菜单下拉菜单

Question

我有一个简单的菜单系统，我想添加使子项在加载时隐藏的功能，直到单击“+”按钮然后子菜单向下滑动。

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

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

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

如果上面的解释没有意义，希望 jsfiddle 能告诉你我想要实现的目标！任何人都可以看到如何进行这项工作吗？

Answer 1

使用next()代替children：

$(this).children("ul.dropdown")

应该改为

$(this).next("ul.dropdown")

Answer 2

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

Fiddle

jQuery 单击按钮时的子菜单下拉菜单

jQuery submenu dropdown when button clicked

javascript

wordpress

jquery