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;
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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，我无法给出完美的答案，但您正在寻找我们使用此变量的内容。 CSS是比使用js更好的选择

在悬停时显示特定的非嵌套div

2 个答案: