Срыв выпадающего навигационного бара при быстром движении мыши - PullRequest
Новая
       6

Срыв выпадающего навигационного бара при быстром движении мыши

0 голосов
/ 09 апреля 2020

У меня есть навигационная панель, похожая на приведенную ниже.

Все отлично работает. За исключением случаев, когда мышь перемещается назад и вперед слишком быстро несколько раз. Есть точка, где мышь зависла на одной ссылке, но раскрывающийся список не отображается. Даже activeMenu не добавляется (не добавляется при проверке, а цвет не зеленый).

Чтобы снова увидеть меню, необходимо вывести указатель мыши из li (ссылка), а затем * 1034. * назад Который будет продолжать действовать в обычном режиме.

ПРИМЕЧАНИЕ-1: setTimeout для removeClass в resetMenu(x) Функция должна дать некоторое время для сворачивания навигационной панели.

ПРИМЕЧАНИЕ-2: Мое предположение таково; Это происходит, когда код застревает между setMenu() и resetMenu(), что в конечном итоге приводит к удалению всех классов activeMenu и не добавлению его даже в случае зависания мыши.

TO TEST: Move Ваша мышь между первым и вторым элементом быстро, несколько раз. Вы дойдете до точки, где мышь зависла на элементе First, но он не зеленый (не activeMenu) и раскрывающийся список не отображается.

Я изо всех сил пытался описать проблему, дайте мне знать, если есть ничего непонятного. 

$("#navMain ul li").mouseenter(function () {
            setMenu(this);
        });
        $("#navMain ul li").mouseleave(function () {
            resetMenu(this);
        });
    function resetMenu(x) {
        $(x).find(".black-submenu").css("height", "0px");
        setTimeout(function () {
            $(x).removeClass('activeMenu');
        }, 200);
    }
    function setMenu(y) {
        $(y).siblings().removeClass("activeMenu");
        $(y).addClass('activeMenu');
        $(y).find(".black-submenu").css("height", "0px");
        $(y).find(".black-submenu").css("height", "150px");
        }
#navMain ul li {
float: left;
margin-right: 25px;
cursor: pointer;
}
#navMain ul li.activeMenu .black-submenu {
background: rgba(0,0,0,0.8);
width: 100%;
float: left;
transition: height .5s;
}
.activeMenu {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navMain">
<ul>
<li>
First element
<div class="black-submenu"></div>
</li>
<li>
Second element
<div class="black-submenu"></div>
</li>
<li>
Third element
<div class="black-submenu"></div>
</li>
</ul>
</nav>
...