Ошибка с выпадающим меню jQuery

Мое выпадающее меню не работает должным образом. Если я переместил курсор вниз в меню, которое опустилось - оно несколько раз поднимается/опускается. Наведите указатель мыши на верхний левый img - это вызовет выпадающее меню.Ошибка с выпадающим меню jQuery

$('.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

источник

2016-07-08 Archie

Это происходит потому, что есть разрыв между вашими деталями внутри .autoexcange__service, у вас есть абсолютный позиционируемый элемент который является самым подменю, но существует разрыв между это и img, поэтому, когда вы наводите курсор и пытаетесь переместиться через подменю, вы на мгновение «наводите мышью» на сам элемент.

Вы можете решить это, изменив свойство top от 50px до 100% таким образом, вы можете быть уверены, что элемент всегда близок к родительскому.

.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; 
}

Также вы можете использовать stop() для предотвращения очереди анимаций слайд каждый раз при входе или оставить элемент:

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

Updated Codepen

источник

2016-07-08 21:06:32 DaniP

Ошибка с выпадающим меню jQuery

ответ

Смежные вопросы