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

【问题标题】：jQuery submenu dropdown when button clicked单击按钮时的jQuery子菜单下拉菜单
【发布时间】：2015-01-15 12:53:35
【问题描述】：

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

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

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

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

如果上面的解释没有意义，希望 jsfiddle 应该向您展示我想要实现的目标！任何人都可以看到如何使这项工作？

【问题讨论】：

标签： javascript jquery wordpress

【解决方案1】：

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

Fiddle

【讨论】：

感谢您的帮助！有没有办法改变悬停点击，以便子菜单在鼠标移出时保持打开状态？也许让“+”按钮成为一个切换按钮，以便它可以打开和关闭子菜单？
将hover更改为toggle
这似乎不起作用，它出于某种原因隐藏了“+”按钮？将其更改为单击也不起作用。

【解决方案2】：

使用next() 代替children：

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

应该改为

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

【讨论】：

这会为每个悬停的菜单下拉两个菜单