如何在元素上同時添加：hover和click事件？
[英]How to add :hover and click event to element same time?
問題描述
當我懸停父元素時，他的孩子就會出現。 當我單擊父元素時，他的孩子也會出現，而當我再次單擊它時，他的孩子也會消失。 但是然后（在單擊父元素以消失的孩子之后）當我將父元素懸停時，他的孩子沒有出現。 為什么？
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>
謝謝。
3 個解決方案
解決方案1
4 2018-08-31 18:53:54
單擊父級時，切換班級比較容易。
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>
解決方案2
2 已采納 2018-08-31 18:48:55
您可以通過將children.style.display設置為空字符串來輕松避免這種情況，而不是在要隱藏子項時none給它分配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);
解決方案3
0 2018-08-31 18:54:04
使用基本編程組成
$('#target').on('click mouseover', function () {
// Do something for both
});
如何使用jQuery同時應用懸停和click事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.