Javascript 如何将：悬停并单击事件同时添加到元素？

当我将鼠标悬停在父元素上时，将显示其子元素。当我单击父元素时，它的子元素也会出现，当我再次单击它时，它的子元素会消失。但当我将鼠标悬停在parent元素上时（在为消失的子元素单击parent元素之后），他的子元素并没有出现。为什么?

var parent=document.querySelector（'nav>ul>li'）；
var children=document.querySelector（'nav>ul>li>ul'）；
parent.addEventListener（'click'，函数（）{
if（children.style.display==“block”）{
children.style.display='none'；
}否则{
children.style.display='block'；
}
});
nav>ul>li>ul{
显示：无；
}
导航>ul>li：悬停ul{
显示：块；
}
李{
宽度：最大含量；
}
保险商实验室{
填充：0px；
}









您可以通过将
children.style.display
设置为空字符串，而不是在要隐藏子字符串时为其指定
none
来轻松避免此问题

编辑：

需要更正：需要将空字符串指定给
children.style.display
，而不是未定义，以删除覆盖（请参见斜体标记的文本-我必须更正）

代码段应如下所示：

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

通过将
children.style.display
设置为空字符串，而不是在要隐藏子字符串时将
none
指定给空字符串，可以轻松避免这种情况

编辑：

需要更正：需要将空字符串指定给
children.style.display
，而不是未定义，以删除覆盖（请参见斜体标记的文本-我必须更正）

代码段应如下所示：

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

单击父类时切换类更容易


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{
显示：无；
}
导航>ul>li：悬停ul{
显示：块；
}
李{
宽度：最大含量；
}
保险商实验室{
填充：0px；
}
.showIt{
显示：块；
}









单击父类时，切换类更容易


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{
显示：无；
}
导航>ul>li：悬停ul{
显示：块；
}
李{
宽度：最大含量；
}
保险商实验室{
填充：0px；
}
.showIt{
显示：块；
}









使用基本编程组合

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

使用基本的编程组合

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

JavaScript向覆盖样式表的元素添加内联样式问题是当您直接在元素上设置css属性时，它的特异性大于样式。JavaScript向覆盖样式表的元素添加内联样式问题是当您直接在元素上设置css属性时，它的特殊性大于样式。关键是为
children.style.display
指定一个显式值会覆盖CSS定义。取消设置此值（即将其设置为未定义）将删除此覆盖。因此，请复制asker代码并创建一个代码段来显示其工作情况。您可以选择您的答案，然后单击
。工作片段区域奖金通常会为您带来更多收入upvotes@Calvin努内斯：不过谢谢你的提示。我已经应用了你的建议，并很快在代码方面遇到了问题。是的，我知道未定义的代码不起作用，这就是为什么我激发了这个代码片段，零长度字符串可以起作用，因为你现在编辑了你的答案。所以，我要投票给你，重点是给
children.style.display
指定一个显式值会覆盖CSS定义。取消设置此值（即将其设置为未定义）将删除此覆盖。因此，请复制asker代码并创建一个代码段来显示其工作情况。您可以选择您的答案，然后单击
。工作片段区域奖金通常会为您带来更多收入upvotes@Calvin努内斯：不过谢谢你的提示。我已经应用了你的建议，并很快在代码方面遇到了问题。是的，我知道未定义的代码不起作用，这就是为什么我激发了这个代码片段，零长度字符串可以起作用，因为你现在编辑了你的答案。所以，我会投票给你如果你能用CSS的话，鼠标盖就是杀伤力过大了。如果你能用CSS的话，鼠标盖就是杀伤力过大了。