Question

我试图制作一个动作菜单，我的实现在Chrome和Edge中效果很好，但在Firefox中却没有，因为它似乎完全忽略了菜单项＆＃39;物质，点击它们并触发菜单下面的项目...

在codepen中，一个menuitem不应该触发下面文章的悬停，点击应该触发关闭菜单事件。

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

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

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

Answer 2

要扩展itacode的回复，button的内容模型正在填写内容，因此nav https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element button >

你说你试过把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>

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

2 个答案: