javascript - 点击时隐藏下拉菜单

Question

在我从中选择某些内容后，我想隐藏一个下拉列表，但将其保留在那里以供我稍后再次悬停。

我当前的代码：

<div class="navbutton_container">
    <button onclick="someFunction()"><p>Title</p></button>
    <div class="nav_dropdown">
        <button onclick="someFunction()"><p>Content1</p></button>
        <button onclick="someFunction()"><p>Content2</p></button>
        <button onclick="someFunction()"><p>Content3</p></button>
        <button onclick="someFunction()"><p>Content4</p></button>
    </div>
</div>

.navbutton_container > .nav_dropdown {
    display: none;
    opacity: 0;
}
.navbutton_container:hover > .nav_dropdown {
    display: block;
    opacity: 1;
    position: absolute;
}

在我选择其中的任何按钮后，我希望下拉菜单暂时消失，以便在他们停止将鼠标悬停在它上面之前它不会碍事。在他们离开后，我想要它，这样他们就可以继续前进并让 :hover 属性再次工作。

如果您认为有更好的结构，我 100% 愿意更改它！

标签： javascripthtmlcss

Answer 1

这是一种结合使用添加类和检测鼠标悬停来实现目标的方法

function someFunction() {}

window.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.navbutton_container').forEach(el => el.addEventListener('mouseover', e => {
    let targ = e.target.classList.contains('navbutton_container') ? e.target : e.target.closest('.navbutton_container');
    targ.querySelector('.nav_dropdown').classList.remove('hold');
  }))
  document.addEventListener('click', e => {
    if (e.target.closest('.nav_dropdown')) {
      e.target.closest('.nav_dropdown').classList.add('hold')

    }
  })
})

.navbutton_container>.nav_dropdown {
  display: none;
  opacity: 0;
}

.navbutton_container:hover>.nav_dropdown {
  display: block;
  opacity: 1;
  position: absolute;
}

.navbutton_container:hover>.nav_dropdown.hold {
  display: none;
  opacity: 0;
}

<div class="navbutton_container">
  <button onclick="someFunction()" class='toggler'><p>Title</p></button>
  <div class="nav_dropdown ">
    <button onclick="someFunction()"><p>Content1</p></button>
    <button onclick="someFunction()"><p>Content2</p></button>
    <button onclick="someFunction()"><p>Content3</p></button>
    <button onclick="someFunction()"><p>Content4</p></button>
  </div>
</div>
<div class="navbutton_container" style='margin-top:100px'>
  <button onclick="someFunction()" class='toggler'><p>Title</p></button>
  <div class="nav_dropdown ">
    <button onclick="someFunction()"><p>Content1</p></button>
    <button onclick="someFunction()"><p>Content2</p></button>
    <button onclick="someFunction()"><p>Content3</p></button>
    <button onclick="someFunction()"><p>Content4</p></button>
  </div>
</div>