Question

是否有可能为我的jQuery提供多个处理程序，例如点击我的导航我希望它显示它所执行的子元素并在两者之间切换。但是我也希望它在鼠标外出时隐藏。

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

如果您要查看或我的代码如下，我已经创建了jsFiddle：

JS / js.js

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

的index.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>

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

有人有什么想法吗？

Answer 1

只需在中间插入空格：

$('.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/

jQuery多个处理程序

1 个答案: