Когда я задаю $('.btn-list').hover, то всё работает. Когда задаю $('.btn-list').click, всё перестает работать.
Делал ещё $('.btn-list').bind('click', 'a', function()), то клик работает, но только один раз: он опускает меню, а обратно не работает.
$(document).ready(function() {
$('.btn-list').click(function() {
$(this).children('ul').stop(false, true).slideDown('slow');
}, function() {
$(this).children('ul').stop(false, true).fadeOut(300);
});
});
$(document).ready(function() {
$('.btn-list').click(function() {
$(this).children('ul').stop(false, true).slideDown('slow');
}, function() {
$(this).children('ul').stop(false, true).fadeOut(300);
});
});
#nav
{
margin: 30px;
}
#nav li
{
list-style: none;
float: left;
width: 150px;
}
#nav>li>ul
{
display: none;
margin-left: -40px;
}
#nav a
{
text-decoration: none;
display: block;
padding: 10px;
background: green;
}
#nav > li > ul > li
{
position:relative;
}
#nav > li > ul > li > ul
{
display:none;
position:absolute;
left:73%;
top:0;
}
#nav > li > ul > li:hover > ul
{
display:block;
}
Ответ
При передаче двух функций в качестве параметров в функцию .click() первая распознаётся как eventData (информация, передаваемая в обработчик), а вторая - непосредственно как handler (обработчик события).
Для достижения нужного результата можно, например, использовать флаг:
$(document).ready(function() {
var opened = false;
$('.btn-list').click(function() {
if (!opened) {
$(this).children('ul').stop(false, true).slideDown('slow');
}
else {
$(this).children('ul').stop(false, true).fadeOut(300);
}
opened = !opened;
});
});
Не самое изящное решение, но простое.
Комментариев нет:
Отправить комментарий