Question

当我将鼠标悬停在.first元素上并且没有其他人拥有类.open时，我想立即添加该类并显示其子列表，否则，我想等待600ms。整个逻辑是我想忽略对.first的兄弟600ms的悬停，因此，如果有人活跃并且我悬停在任何兄弟姐妹上，并且如果我在那个时间范围内移回，我仍然想显示原始子列表。

通过当前的尝试，我得到了闪烁的switheroo节目：

$('.first').hover(function(){
    var cEle = $(this);
    if($('.first.open').length > 0){
      setTimeout(function(){ 
        if($(cEle).hover()){
          $('.first.open').removeClass('open');
          $(cEle).addClass('open');
        }
      }, 600);
    }
    else{
      $(this).addClass('open');
    }

});

.menu{float:left; width:450px; margin:0; padding:0; list-style-type:none; list-style:none;}
.first{float:left; width:150px; text-align:center; margin:0; padding:0; background:white; position:relative;}
.first:hover{background:#ccc;}
.inner{float:left; width:450px; margin:0; padding:0; display:none; position:absolute; left:0; top:100%; background:#e8e8e8;}
.inner li{float:left; width:100%; margin:0; padding:0;}
/*.first:hover .inner{display:block;}*/

.first.open .inner{display:block;}

<ul class="menu">
  <li class="first">Item
    <ul class="inner">
      <li>i-item</li>
      <li>i-item</li>
      <li>i-item</li>
    </ul>
  </li>
  <li class="first">Item
    <ul class="inner">
      <li>i-item</li>
      <li>i-item</li>
      <li>i-item</li>
    </ul>
  </li>
  <li class="first">Item
    <ul class="inner">
      <li>i-item</li>
      <li>i-item</li>
      <li>i-item</li>
    </ul>
  </li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

为此，我希望使用mouseenter和mouseleave事件，并在鼠标离开菜单项时利用clearTimeout销毁setTimeout

已更新：按评论要求在特定时间后提供关闭计时器

Caused by: com.android.builder.dexing.DexArchiveBuilderException: Error while dexing.
The dependency contains Java 8 bytecode. Please enable desugaring by adding the following to build.gradle
android {
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}

See https://developer.android.com/studio/write/java8-support.html for details. Alternatively, increase the minSdkVersion to 26 or above.


julia> using LibGit2

julia> LibGit2.set_ssl_cert_locations("/etc/ssl/certs/ca-certificates.crt")

var timer = null;
var closeTimer = null;
var closeTimeout = 600;

function openMenu(el) {
   $('.first').removeClass('open');
   $(el).addClass('open');
}

$('.first').mouseleave(function() {
    if(timer) clearTimeout(timer);
    closeTimer = setTimeout(function() {
        $('.first').removeClass('open');
    }, closeTimeout);
});

$('.first').mouseenter(function(){
   if(closeTimer) clearTimeout(closeTimer);
   var cEle = this;
   if($('.first.open').length > 0) {
       timer = setTimeout(function(){ 
          openMenu(cEle);
       }, 600);
   } else {
       openMenu(cEle);
   }
});

跟踪悬停的元素，并在特定时间范围内忽略休息

1 个答案: