0

我有一个 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;
});

索引.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;
}
4

1 回答 1

2

尝试

$('.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;
});

演示：小提琴

于 2013-11-10T16:07:45.963 回答