Firefox 中的菜单：点击 menuitem 被忽略

Question

我正在尝试制作一个操作菜单，我的实现在 Chrome 和 Edge 中运行良好，但在 Firefox 中却不行，因为它似乎完全忽略了菜单项的实质，点击通过它们并触发菜单下方的项目。 ..

在代码笔中，悬停菜单项不应触发下方文章的悬停，单击应触发关闭菜单事件。

我真的不明白为什么以及我错过了什么...... 我尝试使用溢出：在按钮父级、导航上可见，但是 nada ...... 我也尝试将导航放在部分容器中，但仍然存在同样的问题......

FULL code on Codepen

CSS

section {
border: 1px solid red;
padding: 20px;
width: 300px;
}

header {
border: 1px solid blue;
display: flex;
justify-content: space-between;
padding: 10px;
}

header > h3 { margin: 0; }

header > button {
display: block;
position: relative;
overflow: visible;
}

nav {
display: none;
position: absolute;
top: 0;
right: 0;
z-index: 2;
background-color: lightyellow;
overflow: visible;
}

.showMenu {
display: block;
}

.menuitem {
white-space: nowrap;
border: 1px solid transparent;
padding: 5px;
width: 100px;
}

.menuitem:hover {
cursor: pointer;
border-color: red;
}

section > div {
border: 1px solid green;
padding: 10px;
}

article {
display: block;
height: 30px;
border: 1px solid black;
}

article:not(:last-child) {
margin-bottom: 10px;
}

article:hover {
background-color: lightgrey;
}

JS

const button = document.getElementsByTagName('button')[0]

const menu = document.getElementsByTagName('nav')[0]

const menuItems = document.getElementsByClassName('menuitem')

button.addEventListener('click', function () {
menu.classList.toggle('showMenu')
})

button.addEventListener('blur', function (event) {
if (!this.contains(event.relatedTarget)) {
     menu.classList.toggle('showMenu')
}
})

for (let mi of menuItems) {
  mi.addEventListener('click', function (event) {
  event.stopPropagation()
  menu.classList.toggle('showMenu')
})
}

HTML

<section>
 <header>
  <h3>HEADER</h3>
  <button>
     <span>menu</span>
     <nav>
        <div class="menuitem">ITEM 1</div>
        <div class="menuitem">ITEM 2</div>
        <div class="menuitem">ITEM 3</div>
        <div class="menuitem">ITEM 4</div>
        <div class="menuitem">ITEM 5</div>
        <div class="menuitem">ITEM 6</div>
     </nav>
  </button>
</header>
<div>
  <article>ARTICLE 1</article>
  <article>ARTICLE 2</article>
  <article>ARTICLE 3</article>
  <article>ARTICLE 4</article>
</div>
</section>

Answer 1

这是因为下拉菜单在按钮内。在按钮内使用导航标签是不正确的。请将nav放在外面，给出相对于header的位置并调整nav的绝对位置。

Answer 2

为了扩展 itacode 的响应，button 的内容模型是短语内容，因此您不能在 button https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element 中包含 nav

您说您尝试将nav 放入section 中，但它不起作用 - 但对我有用。

const button = document.getElementsByTagName('button')[0]

const menu = document.getElementsByTagName('nav')[0]

const menuItems = document.getElementsByClassName('menuitem')

button.addEventListener('click', function () {
   menu.classList.toggle('showMenu')
})

for (let mi of menuItems) {
   mi.addEventListener('click', function () {
      menu.classList.toggle('showMenu')
   })
}

section {
   border: 1px solid red;
   padding: 20px;
   width: 300px;
}

header {
   border: 1px solid blue;
   display: flex;
   justify-content: space-between;
   padding: 10px;
   position: relative;
}

header > h3 { margin: 0; }

header > button {
   display: block;
   position: relative;
   overflow: visible;
}

nav {
   display: none;
   position: absolute;
   top: calc(100% - 10px);
   right: 0;
   z-index: 2;
   background-color: lightyellow;
   overflow: visible;
}

.showMenu {
   display: block;
}

.menuitem {
   white-space: nowrap;
   border: 1px solid transparent;
   padding: 5px;
   width: 100px;
}

.menuitem:hover {
   cursor: pointer;
   border-color: red;
}

section > div {
   border: 1px solid green;
   padding: 10px;
}

article {
   display: block;
   height: 30px;
   border: 1px solid black;
}

article:not(:last-child) {
   margin-bottom: 10px;
}

article:hover {
   background-color: lightgrey;
}

<section>
   <header>
      <h3>HEADER</h3>
      <button>
         <span>OPEN</span>
         
      </button>
      <nav>
            <div class="menuitem">ITEM 1</div>
            <div class="menuitem">ITEM 2</div>
            <div class="menuitem">ITEM 3</div>
            <div class="menuitem">ITEM 4</div>
            <div class="menuitem">ITEM 5</div>
            <div class="menuitem">ITEM 6</div>
         </nav>
   </header>
   <div>
      <article>ARTICLE 1</article>
      <article>ARTICLE 2</article>
      <article>ARTICLE 3</article>
      <article>ARTICLE 4</article>
   </div>
</section>