4

たとえば、ナビゲーションのクリックで、jQuery に複数のハンドラーを設定することはできますか? ただし、マウスを離したときに非表示にすることも必要です。

2 つの別々の関数を記述するポイントはありますか、または 2 つのハンドラーを 1 つにマージできますか?

表示したい場合、または私のコードが以下の場合は、 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>

これは機能しませんが、上記のように機能すると思いますか?

誰にもアイデアはありますか？

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 に答える