javascript - JQuery 悬停效果在第一次悬停时未启动

Question

我有一个菜单，我想在悬停时制作动画以向下滑动子菜单。

问题是，第一个悬停菜单不会向下滑动，第二个悬停菜单不会向下滑动，直到页面再次初始化。 在示例代码中，您可以看到行为，要查看第一次悬停未生效，只需再次按运行即可。我在这里读过几篇文章，但对我来说没有任何意义，我无法与其中任何一篇产生共鸣。

已经尝试了几个小时，欢迎任何帮助或指导。 另外，奖金*子菜单实际上并没有向上滑动，但我可以忍受......

$(function () {    
  $('.stranke').hover(function () {
    $('.stranke-d', this).stop(true, true).delay(100).slideDown(300);
  }, function () {
    $('.stranke-d', this).stop(true, true).slideUp(300);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<div class="w3-dropdown-hover w3-mobile  stranke">
                <button class="w3-button  meni-divider draw" >STRANKE <i class="fa fa-caret-down"></i></button>
                <div class="w3-dropdown-content w3-bar-block w3-dark-grey meni-round w3-center dropdown-stranke" style="box-shadow:0 6px 15px 0 rgba(0, 0, 0, 0.40), 0 6px 15px 0 rgba(0, 0, 0, 0.40)">
                    <a href="unos-strankep-forma.php" class="w3-bar-item w3-button w3-mobile meni-divider meni-round draw  stranke-d">UNOS NOVE</a>
                    <a href="strankep.php" class="w3-bar-item w3-button w3-mobile meni-divider draw  stranke-d">PRAVNE</a>
                    <a href="strankef.php" class="w3-bar-item w3-button w3-mobile meni-round meni-divider draw  stranke-d">FIZIČKE</a>
                </div>
            </div>

Answer 1

初始 html 和第一次 SlideDown/slideUp 之后的 html 之间的区别在于，第一次之后，所有元素上都有 style="display: none" 。如果您使用该内联样式初始化 html，它从一开始就可以工作。

$(function() {
  $('.stranke').hover(function() {
    $('.stranke-d', this).stop(true, true).delay(100).slideDown(300);
  }, function() {
    $('.stranke-d', this).stop(true, true).slideUp(300);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-dropdown-hover w3-mobile  stranke">
  <button class="w3-button  meni-divider draw">STRANKE <i class="fa fa-caret-down"></i></button>
  <div class="w3-dropdown-content w3-bar-block w3-dark-grey meni-round w3-center dropdown-stranke" style="box-shadow:0 6px 15px 0 rgba(0, 0, 0, 0.40), 0 6px 15px 0 rgba(0, 0, 0, 0.40)">
    <a href="unos-strankep-forma.php" class="w3-bar-item w3-button w3-mobile meni-divider meni-round draw  stranke-d" style="display: none">UNOS NOVE</a>
    <a href="strankep.php" class="w3-bar-item w3-button w3-mobile meni-divider draw  stranke-d" style="display: none">PRAVNE</a>
    <a href="strankef.php" class="w3-bar-item w3-button w3-mobile meni-round meni-divider draw  stranke-d" style="display: none">FIZIČKE</a>
  </div>
</div>