Question

我有一个jQuery导航，一旦我点击另一个导航元素，就会使用slideToggle和slideUp。但是我不能按照我想要的方式工作，因为我希望一旦鼠标离开了点击功能中出现的子元素，就会隐藏导航元素。

我尝试了下面的内容，但是当这个<h5>标记离开时<ul>消失了，考虑到下面的陈述，这是有道理的：

$('.nav_parent h5').on('click mouseleave', function ()

说我不知道该如何解决这个问题，我已经在线阅读了关于设置超时功能的内容，我尝试过这个功能并且失败了。

那么有没有人有他们拥有或可以调整我的脚本以启用此功能的任何工作示例？

我的脚本位于下方或查看jsFiddle

提前致谢！

JS / js.js

$('.nav_parent h5').click(function () {
  $(this).next('.nav_child').slideToggle();
   $(this).parent().siblings().children().next().slideUp();
    return false;
});

的index.html

<div class="container">
    <ul id="header_nav">
        <li class="nav_parent">
            <h5>Reports</h5>

            <ul class="nav_child">
                <li><a href="#" class="mnavlink">Download CSV</a>
                </li>
            </ul>
        </li>
        <li class="nav_parent">
            <h5>Build</h5>

            <ul class="nav_child">
                <li><a href="#" class="mnavlink">Build new site</a>
                </li>
            </ul>
        </li>
        <li class="nav_parent">
            <h5>Subscriptions</h5>

            <ul class="nav_child">
                <li><a href="#" class="mnavlink">E-Briefings</a>
                </li>
            </ul>
        </li>
        <li class="nav_parent">
            <h5>Media Store</h5>

            <ul class="nav_child">
                <li><a href="#" class="mnavlink">Image Store</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS / style.css中

.nav_parent {
    display:inline-block;
    width:24%;
    background:#FCCC5F;
}
.nav_parent h5:hover {
    background:#FCE49D;
}
.nav_child {
    display:none;
}
.nav_child li {
    line-height:30px;
}
.nav_child li:hover {
    background:#FCE49D;
}

Answer 1

尝试

$('.nav_parent h5').on('click', function (e) {
    $(this).next('.nav_child').stop(true, true).slideDown();
    $(this).parent().siblings().children('.nav_child').stop(true, true).slideUp();
    return false;
});
$('.nav_parent').on('mouseleave', function () {
    $(this).children('.nav_child').stop(true, true).slideUp();
    return false;
});

演示：Fiddle

jQuery slideToggle，单击并隐藏鼠标输出

1 个答案: