在悬停时逐个显示子菜单

Question

实际上，我正在尝试创建一个子菜单，用户将鼠标悬停在第一个菜单上，其子列表应该一个接一个地显示在另一个菜单上。

我认为这只是一个小问题。在第一个菜单的孩子完全出现之前，我要去第二或第三个菜单。第二个和第三个工作正常，但如果我将鼠标悬停在第一个菜单上，它仍会显示剩下的列表（子），它将会显示。

(function($) {
  $.fn.animateOneByOne = function(params) {
    params = $.extend({
      css: '',
      duration: 700,
      interval: 300,
      order: 'ASC',
      callback: ''
    }, params);

    if (params.order == 'ASC') {
      elements = $(this);
    } else {
      elements = $(this).get().reverse();
    }

    count = $(this).length - 1;

    $(elements).each(function(id) {
      setTimeout(function(element) {
        if (id == count) {
          $(element).animate(params.css, params.duration, params.callback);
        } else {
          $(element).animate(params.css, params.duration);
        }

      }, id * (params.interval + params.duration), $(this));

    });

  };

})(jQuery);
$('.srvs_dropdown').hover(function() {
    $(this).find("ul li").animateOneByOne({
      css: {
        opacity: '1'
      },
      duration: 450,
      interval: 100

    });
    return false;
  },
  function() {
    $(this).find("ul li").css("opacity", 0);

  });

.srvs_dropdown li {
  opacity: 0;
}

a {
  color: #fff;
}

.pi-mm-list {
  padding-left: 20px;
  background-color: #09142D;
  width: 250px;
  color: #fff;
}

.pi-mm-list li ul {
  display: none;
  position: absolute;
  left: 180px;
  width: 234px;
  padding-top: 7px;
  background-color: #09142D;
  z-index: 999;
}

.pi-mm-list li:hover ul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pi-mm-list">
  <li class="srvs_dropdown"><a href="#">Network Security</a>
    <ul>
      <li><a href="#">Firewall and VPN</a></li>
      <li><a href="#">Web Security</a></li>
      <li><a href="#">Application Security</a></li>
      <li><a href="#">Threat Detection &amp; Response</a></li>
      <li><a href="#">Data Leakage Prevention</a></li>
      <li><a href="#">IPS</a></li>
    </ul>
  </li>
  <li class="srvs_dropdown"><a href="#">Endpoint Security</a>
    <ul>
      <li><a href="#">Antivirus</a></li>
      <li><a href="#">DLP</a></li>
    </ul>
  </li>
  <li class="srvs_dropdown"><a href="#">Wireless Security</a>
    <ul>
      <li><a href="#">Access Point</a></li>
      <li><a href="#">Controller</a></li>
    </ul>
  </li>
</ul>

Answer 1

据我了解或观察到您的问题和代码，看起来只有当您首次将鼠标悬停在所有链接上时才会正常工作，但是一旦您到达第一个块中的最后一个菜单项并开始悬停从底部到顶部反向你会看到子菜单链接开始随机出现，问题是你使用的延迟只需要一个小的修复，即incremental delay你缺少。它下面的代码按预期工作，观察$(elements).each(function(id) {中的差异，只需用延迟替换setTimeOut并在那里添加增量并观察差异，您也可以删除interval参数看下面的代码和工作示例，希望它能解决问题。

(function($) {
  $.fn.animateOneByOne = function(params) {
    params = $.extend({
      css: '',
      duration: 700,
      order: 'ASC',
      callback: ''
    }, params);

    if (params.order == 'ASC') {
      elements = $(this);
    } else {
      elements = $(this).get().reverse();
    }

    count = $(this).length - 1;

    $(elements).each(function(id) {
      let isLastLi = id == count;
      console.log('animate', id);
      (isLastLi) ? $(this).delay((id + 1) * params.duration).animate(params.css, 0, params.callback): $(this).delay((id + 1) * params.duration).animate(params.css, 0);

    });

  };

})(jQuery);


$('.srvs_dropdown').hover(function() {
    console.log('here');
    $(this).find("ul li").animateOneByOne({
      css: {
        opacity: '1'
      },
      duration: 400
    });
    return false;
  },
  function() {
    $(this).find("ul li").stop().css("opacity", 0);

  });

.srvs_dropdown li {
  opacity: 0;
}

a {
  color: #fff;
}

.pi-mm-list {
  padding-left: 20px;
  background-color: #09142D;
  width: 250px;
  color: #fff;
}

.pi-mm-list li ul {
  display: none;
  position: absolute;
  left: 180px;
  width: 234px;
  padding-top: 7px;
  background-color: #09142D;
  z-index: 999;
}

.pi-mm-list li:hover ul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pi-mm-list">
  <li class="srvs_dropdown"><a href="#">Network Security</a>
    <ul>
      <li><a href="#">Firewall and VPN</a></li>
      <li><a href="#">Web Security</a></li>
      <li><a href="#">Application Security</a></li>
      <li><a href="#">Threat Detection &amp; Response</a></li>
      <li><a href="#">Data Leakage Prevention</a></li>
      <li><a href="#">IPS</a></li>
    </ul>
  </li>
  <li class="srvs_dropdown"><a href="#">Endpoint Security</a>
    <ul>
      <li><a href="#">Antivirus</a></li>
      <li><a href="#">DLP</a></li>
    </ul>
  </li>
  <li class="srvs_dropdown"><a href="#">Wireless Security</a>
    <ul>
      <li><a href="#">Access Point</a></li>
      <li><a href="#">Controller</a></li>
    </ul>
  </li>
</ul>