4

是否可以为我的 jQuery 提供多个处理程序，例如单击我的导航时，我希望它显示它所做的子元素并在两者之间切换。但是我也希望它在鼠标离开时隐藏。

编写两个单独的函数是否有任何意义，或者我可以将两个处理程序合并为一个，如下所示：

如果您想查看或者我的代码如下，我已经创建了一个jsFiddle ：

js/js.js

$('.child').hide();
$('.parent').on('click', 'mouseout', function() {
$('#usernav').find('ul').slideUp();
$(this).find('ul').slideToggle();
});

索引.html

<div class="rightBottom">
<h1 class="boxheadings">Other functions</h1>
           <p class="boxp">Click this button to view your current published site in a new window. This will not show your most recent changes until you click the ‘Publish Changes’ button on the right, alternatively click view local to see unpublished changes.</p>
 <ul id="usernav">
<li class="parent">Manage
    <ul class="child">
        <li>child11</li>
        <li>child12</li>
    </ul>
</li>
<li class="parent">Subscriptions
    <ul class="child">
        <li>E-Briefings</li>
        <li>E-Briefings Subscriptions</li>
        <li>Knowledge Briefings</li>
    </ul>
</li>
  <li class="parent">Media Store
    <ul class="child">
        <li>Image Store</li>
        <li>Document Store</li>
        <li>Media Store</li>
    </ul>
</li>

这不起作用，但我认为它可以像上面那样工作？

有人有什么想法吗？

4

1 回答 1

3

只需在两者之间放置空格：

$('.child').hide();
$('.parent').on('click mouseout', function() {
$('#usernav').find('ul').slideUp();
$(this).find('ul').slideToggle();
});

我相信这是您的本意，但是：

$('.child').hide();
$('.parent').on('click', function() {
    $(this).find('ul').stop(true, false).slideToggle();
}).on('mouseout', function() {
    $('#usernav').find('ul').stop(true, false).slideUp();
});

这里stop()的作用是清除之前的动画队列，因此如果事件多次触发它就不会重复。

http://jsfiddle.net/YQNsL/

于 2013-09-16T09:32:08.463 回答