Jquery выбран дольше, чем показал div с событием mouseout, закрывающим div

как я могу решить эту проблему, пожалуйста? У меня есть div с формой, которая по умолчанию скрыта. Он отображается при щелчке мыши, и я хочу, чтобы он скрывался при выходе из мыши - это простая часть.

Но есть одна проблема, я использую jquery selected - http://harvesthq.github.io/chosen/ для выпадающего меню, которое находится внутри этого div, но выпадающее меню длиннее, чем div. Это означает, что когда я выбираю какую-либо опцию, указатель мыши находится за пределами div с событием mouseout и скрывается, когда я перемещаю мышь.

Какие-либо предложения?

Спасибо.

jQuery прост:

$('#header_form').mouseleave(function () {
    $('#header_form').hide();
});

Решение 1. После часа попыток и кодирования я нашел одно простое решение: внутри #header_form создайте div с абсолютной позицией, шириной как #header_form и длинной, как раскрывающееся меню, начинающееся с позиции раскрывающегося меню. Div с абсолютным позиционированием не повлияет на цвет фона #header_form, но создаст невидимый «слой», по которому вы можете перемещаться мышью «снаружи» #header_from, не закрывая его. Вам также необходимо удалить этот элемент исправления, когда вы перемещаете указатель мыши в исходную форму #header_form, чтобы при повторном перемещении div скрывался.

Демонстрация здесь: http://jsfiddle.net/a5PuG/5/ (просто измените синий цвет на прозрачный ) Тут еще нужны доработки :)


jquery jquery-chosen
person Leachim    schedule 20.12.2013    source источник
comment
Это может быть проблема с вашим HTML. Не могли бы вы также опубликовать код для навигации, пожалуйста?   -  person Shafiq Jetha    schedule 20.12.2013
comment
Вот демо - jsfiddle.net/a5PuG/2   -  person Leachim    schedule 20.12.2013
comment
Я думаю, вы, возможно, захотите переосмыслить то, как вы это делаете. Это будет довольно сложно и потребует немного запутанного javascript, чтобы заставить это работать так, как вы задумали.   -  person Shafiq Jetha    schedule 20.12.2013

Ответы (1)


arrow_upward
0
arrow_downward

Отредактировал мой ответ, найдя лучший способ. На самом деле вы можете сделать это довольно легко. Измените свой код на это:

$('select').chosen();
var shouldHide;
$('#form').mouseleave(function() {
    if (shouldHide) $(this).hide();
})
.mouseover(function() {
    shouldHide = true;         
});
$('.chosen-container').mouseover(function() {
    shouldHide = false;
})
.mouseleave(function() {
    shouldHide = false;
});

jsFiddle

person Rob Louie    schedule 20.12.2013
comment
Спасибо за ответ, это полезно :). В вашем коде есть один недостаток для меня, но это моя вина, я его не указал. Моя форма отображается при наведении, и мне нужно, чтобы она скрывалась при наведении мыши, но ваше решение не скрывает форму, когда я сначала не перемещаю мышь в форме. - person Leachim; 20.12.2013
comment
Думаю, я не совсем понимаю вас. Ваша форма должна начинаться невидимой? Есть кнопка поменьше? Я могу изменить ответ, если это необходимо. Может быть, обновить ваш jsFiddle, чтобы показать эту функциональность? Я рад взглянуть на это, но если этого достаточно, чтобы решить вашу проблему, не могли бы вы пометить это как ответ? - person Rob Louie; 20.12.2013
comment
Да, вы правы, форма показывает эффект наведения на кнопку и невидима при запуске. Я пытаюсь обновить его, но скрипт использует z-индексы css, и по какой-то причине он не работает с jsfiddle. На моем сайте все работает хорошо - jsfiddle.net/a5PuG/10 - person Leachim; 20.12.2013