Jquery 事件委派以支持悬停并单击协调菜单

我正在构建一个垂直的手风琴导航，它需要显示子导航链接，并在悬停或单击.accordion按钮时保持打开状态

到目前为止，我已经能够让child.accordionContent在悬停时展开，但是它不会保持打开状态

我看到了这样一个页面：，这可能是一个好的开始，但不能让我的头围绕着实现

这是我的小提琴和标记：

HTML }))

什么样的

---

如果不需要切换（这会使单击过时），请使用

.slideDown（'fast'）

而不是

slideToggle

。

如果将

mouseenter（）

和

mouseleave（）

放在包含的

？Dan-这是否意味着将$（'.accordioButton'）。mouseenter（函数（）替换为$（“#mainNav li”）.mouseenter（函数（）？如果是，则不会产生任何结果

<ul id="mainNav">
<li><a class="accordionButton" href="javascript:void(0);">head link 1</a>

    <ul class="accordionContent">
        <li>
            <a href="javascript:void(0);">sub link 1</a>

        </li>
        <li>
            <a href="javascript:void(0);">sub link 2</a>

        </li>
    </ul>
</li>
<li><a class="accordionButton" href="javascript:void(0);">head link 2</a></li>
<li><a class="accordionButton" href="javascript:void(0);">head link 3</a>
    <ul class="accordionContent">
        <li>
            <a href="javascript:void(0);">sub link 1</a>

        </li>
        <li>
            <a href="javascript:void(0);">sub link 2</a>

        </li>
    </ul>
</li>
<li><a class="accordionButton" href="javascript:void(0);">head link 4</a></li>
<li><a class="accordionButton" href="javascript:void(0);">head link 5</a></li>
<li><a class="accordionButton" href="javascript:void(0);">head link 6</a></li>
</ul>

$(document).ready(function () {

$('.accordionContent').hide();

$('.accordionButton').mouseenter(function () {

    $(this).next('.accordionContent').stop().slideToggle("normal");

}, function () {

    $(this).addClass("hover");
    $(this).next('.accordionContent').stop().slideToggle('fast');

}).mouseleave(function () {

    $(this).next('.accordionContent').stop().slideToggle("normal");

}, function () {

    $(this).removeClass("hover");
    $(this).next('.accordionContent').stop().slideToggle('fast');

});

$(function () {
    var $accContents = $('.accordionContent'),
        $accButtons = $('.accordionButton');

    $accContents.hide();

    $accButtons.on('mouseenter click', function() {
        var $thisContent = $(this).parent().find('.accordionContent');
        if($thisContent.length) {
            $accContents.not($thisContent).slideUp('fast');
            $thisContent.slideToggle('fast');
        }
    });
});