jQuery悬停效果未在第一次悬停时启动 [英] JQuery hover efect not starting on first hover

问题描述

我有一个要在悬停时进行动画处理的菜单，以使子菜单向下滑动.

I have a menu that I want to animate on hover to slide down an sub menu.

问题在于，第一个悬停菜单不会向下滑动，仅在第二个菜单上才向下滑动，直到此后再次初始化页面为止. 在示例代码中，您可以看到行为，要查看第一个悬停没有生效，只需再次按run.我在这里读过几篇文章，对我来说都没有意义，因此我与任何一篇都无关.

Problem with this is that on first hover menu doesn't slide down, just on second and all after that until page is again initialized. In example code you you can see the behavior, to see the first hover not taking effect just press run again. I have read few articles here and none of it makes sense to me and I can not relate to any of them.

现在尝试了几个小时，因此欢迎您提供任何帮助或指导. 另外，Bonus *子菜单实际上并没有滑动，但是我可以忍受...

Been trying for hours now so any help or guidance is welcome. Also bonus* sub menu dos not actually slide up, but I can live with that...

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

推荐答案

初始html与第一次slideDown/slideUp之后的html之间的区别是，第一次之后，所有元素上都带有style="display: none".如果您使用该内联样式初始化html，则一开始就可以使用.

The difference between your initial html and the html after the first slideDown/slideUp is that after the first time, all the elements have a style="display: none" on them. If you initialize the html with that inline style, it works from the get go.

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

这篇关于jQuery悬停效果未在第一次悬停时启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！