Если вы сделаете раскрывающиеся параметры дочерними для кнопки, открывающей меню, а затем добавьте прослушиватель события mouseout / mouseleave к кнопке, открывающей меню, этот обработчик должен применяться, если мышь находится за пределами кнопки, открывающей меню. и дети, так как они теперь являются частью меню. Тем не менее, тег <img> не может иметь дочерние элементы, если вы не добавите их динамически, поэтому вы должны изменить тег <img> на другой тег, который может иметь дочерние элементы (но не элемент уровня блока), и указать изображение с помощью Свойство CSS background-image.
Другим вариантом может быть добавление mouseover / mouseenter и слушателя mouseout / mouseleave к изображению и меню и установка времени ожидания после каждого mouseout / mouseleave в течение примерно 1 секунды, которое будет проверять переменную, установленную mouseover / mouseenter обработчик и посмотрите, изменился ли он - если так, то произошел еще один переход мышью / указатель мыши (т. е. пользователь убрал свою мышь с изображения, вызвав указатель мыши / отпускание мыши, но затем переместил его в меню, вызвав указатель мыши / указатель мыши) , Например:
<img src="images/dropMenu.gif" class="menu_head_content" />
<ul class="menu_body_content scroll-pane" id="SmallDropDown">
<li><a class="modalWindow cboxElement" href="http://mysite.com/service/0.aspx">1</a></li>
...
<li><a class="modalWindow cboxElement" href="http://mysite.com/service/16.aspx">17</a></li>
</ul>
<script type="text/javascript">
// Global var
var is_in_menu = false;
$(function () {
// Initially hide menu body
$(".menu_body_content").hide();
// MouseEnter event handler
$(".menu_head_content, .menu_body_content").bind("mouseenter", function () {
is_in_menu = true;
if ($(".menu_body_content").css("display") == "none") {
$(".menu_body_content").fadeIn("fast");
}
});
// MouseLeave event handler
$(".menu_head_content, .menu_body_content").bind("mouseleave", function () {
is_in_menu = false;
setTimeout(function () {
if (is_in_menu === false) {
$(".menu_body_content").fadeOut("fast");
}
}, 1000);
});
// Image click handler
$(".menu_head_content").click(function () {
is_in_menu = true;
if ($(".menu_body_content").css("display") == "none") {
$(".menu_body_content").fadeIn("fast");
}
});
});
</script>