2013-09-16 3 views
4

Возможно ли иметь несколько обработчиков для моего jQuery, например, при щелчке по моей навигации. Я хочу, чтобы он показывал дочерние элементы, которые он выполняет, и переключает между ними. Однако я также хочу, чтобы он скрывался, когда мышь отсутствует.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> 

Это не работает, но я предполагаю, что он может работать, как указано выше?

Есть ли у кого-нибудь идеи?

ответ

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/

+2

его working..but немного быстро переключаясь вверх и вниз ... –

+0

@simonzack спасибо да, что работал и да это переключение вверх и вниз очень быстро! но, надеюсь, я могу замедлить это, указав настройки скорости – 001221

+0

@simonzack спасибо за улучшенный ответ, который действительно полезен! – 001221

Смежные вопросы