带有 jQuery 下拉菜单的错误答案

【问题标题】：Bug with jQuery dropdown menu带有 jQuery 下拉菜单的错误
【发布时间】：2016-11-11 12:40:55
【问题描述】：

我的下拉菜单无法正常工作。如果我将光标向下移动到下拉菜单 - 它会向上/向下滑动几次。将鼠标悬停在左上角 img - 它会触发下拉菜单。

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

【问题讨论】：

标签： jquery html css

【解决方案1】：

发生这种情况是因为.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

【讨论】：