在懸停時顯示特定的非嵌套div

Question

我有兩套打算用作菜單的div。 我做了一些Jquery代碼來顯示它們，但它對於其中的一個很好用，但是如果我想創建更多的代碼，則會切換所有div。 我想也許添加諸如data-index ="0"來關聯它們將是一個好方法，但是似乎無法使它工作

 menuState = { menuOpen: false, timer: false } $('.main, .sub').on('mouseover', () => { clearInterval(menuState.timer) if (menuState.menuOpen) { return } $('.sub').show(); menuState.menuOpen = true }) $('.main, .sub').on('mouseout', () => { menuState.timer = setTimeout( () => { menuState.menuOpen = false $('.sub').hide() }, 300) }) 

 body { padding: 2rem; font-family: Open Sans; font-weight: 100; } .thing { border-radius: 5px; padding: 1rem 2rem; font-size: 2rem; margin: 1rem; color: white; cursor: pointer; } .pink { background: pink; } .blue { background: lightblue; } .sub { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="thing pink main" data-index ="0">Hover</div> <div class="thing pink sub" data-index ="0">Show</div> <div class="thing blue main" data-index ="1">Hover</div> <div class="thing blue sub" data-index ="1">Show</div> 

可以肯定的是，預期的行為是，如果我將鼠標懸停在藍色div上，則會顯示另一個藍色div。 如果將鼠標懸停在粉紅色的div上，則會顯示一個粉紅色的div。

提前致謝！

編輯

我確實需要保留下拉菜單，因為這是一個簡化的菜單，並且在切換的div上將為用戶提供信息。

Answer 1

這里不需要JS，因為您可以在一條CSS規則中實現所有邏輯：

.main:hover + .sub {
  display: block;
}

 body { padding: 2rem; font-family: Open Sans; font-weight: 100; } .thing { border-radius: 5px; padding: 1rem 2rem; font-size: 2rem; margin: 1rem; color: white; cursor: pointer; } .pink { background: pink; } .blue { background: lightblue; } .sub { display: none; } .main:hover + .sub { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="thing pink main" data-index="0">Hover</div> <div class="thing pink sub" data-index="0">Show</div> <div class="thing blue main" data-index="1">Hover</div> <div class="thing blue sub" data-index="1">Show</div> <div class="thing pink main" data-index="0">Hover</div> <div class="thing pink sub" data-index="0">Show</div> 

Answer 2

$('.main, .sub').on('mouseover', function() {
  clearInterval(menuState.timer)
  if (menuState.menuOpen) { return }
  if ($(this).hasClass('.sub')) {
    $(this).show();
  } else {
    $('.sub[data-index="'+$(this).data('index')+'"]').show();
  }
  menuState.menuOpen = true
})

由於您沒有為我們提供.sub和.main類的html，因此我無法給出完美的答案，但是您在找什么我們使用this變量。 CSS是比使用js更好的選擇