Archie Archie - 4 months ago 13
Javascript Question

Bug with jQuery dropdown menu

My dropdown menu doesn't work properly. If I move cursor down to menu, which dropped down - it slides up/down several times.
Hover mouse on the top left img - it will trigger the dropdown.



$('.autoexcange__service').mouseenter(
function() {
$(this).find($('.autoexcange__menu')).slideDown(350);
});
$('.autoexcange__service').mouseleave(
function() {
$(this).find($('.autoexcange__menu')).slideUp('slow');
});

.autoexcange {
height: 461px;
background-image: url("../img/des/mobile_top-block.png");
background-repeat: no-repeat;
margin-top: 56px;
margin-left: 9px;
position: relative;
width: 304px;
padding-top: 70px;
}
.autoexcange .autoexcange__header {
background-color: #FFF;
color: #666;
display: block;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 800;
letter-spacing: 1px;
line-height: 19px;
margin-left: 21px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: -6px;
width: 260px;
}
.autoexcange .autoexcange__block {
margin-left: 7px;
height: 245px;
width: 293px;
background-image: url("../img/des/mobile__menu-block.png");
background-repeat: no-repeat;
}
.autoexcange .autoexcange__section {
position: relative;
margin: 0px auto;
width: 280px;
height: 70px;
margin-bottom: 10px;
}
.autoexcange .autoexcange__section .autoexcange__numbers {
float: left;
width: 90px;
font-family: "Open Sans", sans-serif;
font-weight: 800;
color: #666;
text-transform: uppercase;
}
.autoexcange .autoexcange__section .autoexcange__numbers .autoexcange__sell {
margin-top: 11px;
margin-left: 5px;
font-size: 11px;
letter-spacing: 0.7px;
}
.autoexcange .autoexcange__section .autoexcange__numbers .autoexcange__sell--get {
margin-top: 14px;
}
.autoexcange .autoexcange__section .autoexcange__numbers .autoexcange__price {
font-size: 20px;
margin-top: 13px;
margin-left: 3px;
}
.autoexcange .autoexcange__section .autoexcange__numbers .autoexcange__price--get {
margin-left: 5px;
margin-top: 13px;
}
.autoexcange .autoexcange__section .autoexcange__service {
position: absolute;
background-image: url("../img/svg/services--pm.svg");
background-size: 30px;
background-repeat: no-repeat;
padding-left: 50px;
top: 32px;
left: 99px;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu {
display: none;
background-color: #FFF;
border: 1px solid #1469eb;
border-top: none;
width: 261px;
height: 153px;
position: absolute;
z-index: 1000;
top: 50px;
left: -92px;
background-image: url("../img/des/mobile__grid.png");
background-repeat: no-repeat;
background-position: 4px center;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item {
width: 82px;
height: 75px;
float: left;
background-image: url("../img/logos/btc.png");
background-position: 27px 11px;
background-repeat: no-repeat;
font-family: "Open Sans", sans-serif;
font-size: 13px;
color: #666;
text-align: center;
cursor: pointer;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item p {
margin-top: 50px;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item--2 {
background-image: url("../img/logos/pm.png");
background-position: 34px 11px;
width: 92px;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item--3 {
background-image: url("../img/logos/paymer.png");
background-position: 30px 9px;
width: 86px;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item--4 {
background-image: url("../img/logos/ok.png");
background-position: 19px 15px;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item--5 {
background-image: url("../img/logos/zp.png");
background-position: 35px 10px;
width: 92px;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item--6 {
background-image: url("../img/logos/pb24.png");
background-position: 34px 14px;
width: 86px;
}
.autoexcange .autoexcange__section .autoexcange__service--get {
background-image: url("../img/svg/services--pb.svg");
top: 30px;
}
.autoexcange .autoexcange__section .autoexcange__currency {
position: absolute;
font-family: "Open Sans", sans-serif;
font-size: 20px;
font-weight: 800;
color: #666;
top: 33px;
left: 197px;
}
.autoexcange .autoexcange__section .autoexcange__currency span {
padding-top: 3px;
display: block;
float: left;
}
.autoexcange .autoexcange__section .autoexcange__currency .autoexcange__dropdown img {
padding-left: 9px;
}
.autoexcange .autoexcange__section .autoexcange__currency--get {
top: 31px;
}
.autoexcange .autoexcange__dropdown img {
height: 23px;
padding-top: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="autoexcange">
<h2 class="autoexcange__header">АВТОМАТИЧЕСКИЙ ОБМЕН ЭЛЕКТРОННЫХ ВАЛЮТ</h2>
<div class="autoexcange__block">
<div class="autoexcange__section">
<div class="autoexcange__numbers">
<p class="autoexcange__sell">отдаете</p>
<p class="autoexcange__price">0,00.....</p>
</div>
<div class="autoexcange__service">
<a href="#" class="autoexcange__dropdown">
<img src="img/svg/mobile__down.svg" alt="">
</a>
<div class="autoexcange__menu">
<div class="autoexcange__item">
<p>BTC-e</p>
</div>
<div class="autoexcange__item autoexcange__item--2">
<p>Perfect Money</p>
</div>
<div class="autoexcange__item autoexcange__item--3">
<p>Paymer</p>
</div>
<div class="autoexcange__item autoexcange__item--4">
<p>Okpay</p>
</div>
<div class="autoexcange__item autoexcange__item--5">
<p>Z-payement</p>
</div>
<div class="autoexcange__item autoexcange__item--6">
<p>Приват 24</p>
</div>
</div>
</div>
<div class="autoexcange__currency">
<span>USD</span>
<a href="#" class="autoexcange__dropdown">
<img src="img/svg/mobile__down.svg" alt="">
</a>
</div>
</div>
<div class="autoexcange__section">
<div class="autoexcange__numbers">
<p class="autoexcange__sell autoexcange__sell--get">получаете</p>
<p class="autoexcange__price autoexcange__price--get">0,00.....</p>
</div>
<div class="autoexcange__service autoexcange__service--get">
<a href="#" class="autoexcange__dropdown">
<img src="img/svg/mobile__down.svg" alt="">
</a>
</div>
<div class="autoexcange__currency autoexcange__currency--get">
<span>USD</span>
<a href="#" class="autoexcange__dropdown">
<img src="img/svg/mobile__down.svg" alt="">
</a>
</div>
</div>





http://codepen.io/ArkadiyS/pen/vKZGzA

Answer

That happens because there is a gap between your items inside the .autoexcange__service, you have an absolute positioned element wich is the submenu but there is a gap between this and the img, so when you hover and try to move over the submenu you are for a little moment "mouseleaving" the element itself.

You can solve it by changing the top property from 50px to 100% that way you can be sure the element is always close to the parent.

.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu {
    display: none;
    background-color: #FFF;
    border: 1px solid #1469eb;
    border-top: none;
    width: 261px;
    height: 153px;
    position: absolute;
    z-index: 1000;
    top: 100%; /*MODIFY THIS LINE*/
    left: -92px;
    background-image: url("../img/des/mobile__grid.png");
    background-repeat: no-repeat;
    background-position: 4px center; 
}

Also you can use stop() to prevent the queue of slide animations each time you enter or leave the element:

$('.autoexcange__service').hover(function() {
    $(this).find('.autoexcange__menu').stop().slideToggle(350);
});

Updated Codepen

Comments