如何同时向元素添加 :hover 和 click 事件？

Question

当我悬停 parent 元素时，他的 child 出现了。当我点击 parent 元素时，他的 child 也会出现，当我再次点击它时，他的 child 消失。但是然后（单击 parent 元素消失 child 后）当我悬停 parent 元素时，他的 child 没有出现。为什么？

var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');

parent.addEventListener('click', function () {
  if (children.style.display == 'block') {
    children.style.display = 'none';
  } else {
    children.style.display = 'block';
  }
});

nav > ul > li > ul {
  display: none;
}

nav > ul > li:hover ul {
  display: block;
}

li {
  width: max-content;
}

ul {
  padding: 0px;
}

  <body>
    <nav>
      <ul>
        <li><a href="#">Parent</a>
          <ul>
            <li><a href="#">child</a></li>
            <li><a href="#">child</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>

谢谢。

Answer 1

当您想隐藏子项时，您可以通过将 children.style.display 设置为 空字符串 而不是将 none 分配给它来轻松避免这种情况。

编辑：

需要更正：需要将空字符串分配给 children.style.display 而不是 undefined 以删除覆盖（请参阅以斜体标记的文本 - 我必须更正）。

代码片段应如下所示：

var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');

parent.addEventListener('click', function () {
  alert(children.style.display);
  if (children.style.display == 'block') {
    children.style.display = '';
  } else {
    children.style.display = 'block';
  }
}, true);

Answer 2

单击父项时更容易切换 class。

var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');

parent.addEventListener('click', function() {
  children.classList.toggle("showIt");
});

nav>ul>li>ul {
  display: none;
}

nav>ul>li:hover ul {
  display: block;
}

li {
  width: max-content;
}

ul {
  padding: 0px;
}

.showIt {
  display: block;
}

<body>
  <nav>
    <ul>
      <li><a href="#">Parent</a>
        <ul>
          <li><a href="#">child</a></li>
          <li><a href="#">child</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

Answer 3

使用基本的编程组合

$('#target').on('click mouseover', function () {
// Do something for both
});

如何同时向元素添加 :hover 和 click 事件？

How to add :hover and click event to element same time?

javascript

css

pseudo-class

dom-events