Question

当光标在id #sideNav（mouseout）之外时，所有选项卡都应该变为默认值（不影响当前函数），这意味着这些元素将显示为none而不是display block。它应该与导航栏的下拉菜单具有完全相同的工作功能。一旦光标进入#sideNav并从该点悬停第一个选项卡，即使用户将鼠标移到#sideNav元素之外，可折叠选项卡的显示也会具有属性块。要求：答案必须用vanilla JavaScript编写。

https://codepen.io/chichichi/pen/BmKeZX

(function() {
    "use strict";
    const sideNav = document.getElementById('side-nav');
    const navTab = sideNav.querySelectorAll('.nav-tab');
   

    navTab.forEach(tab => {
        tab.addEventListener('mouseover', function(e) {
            e.preventDefault();

            const nodes = Array.from(e.target.parentNode.querySelectorAll('.nav-tab-sub-category'));
            nodes.forEach(nodes => nodes.style.display = "none");

            if(e.target && e.target.nextElementSibling) {
                e.target.nextElementSibling.style.display = "block";                
            }
        }); 
        
    });   

})();

.sidebar-navigation {
    border: 1px solid black;
    width: 50%;
    position: relative;
    margin: 0;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
.sidebar-navigation .nav-tab {
    border: 1px solid black;
    padding: 10px;
    width: 200px;
}
.sidebar-navigation .nav-tab-sub-category {
   position: absolute;
   top: 0;
   transform: translateX(220px);
   border: 1px solid black;
   display: none;
   width: 100%;
   top: 0;
   bottom: 0;
   right: 0;
   padding: 20px;
   left: 0;
}

<div id="side-nav" class="sidebar-navigation" data-attribute="sidebar">
		<div class="nav-tab" data-attribute="product_a">Women's Clothing</div>
		<div class="nav-tab-sub-category">
			<div>Women's Clothing</div>
			<div>Women's Clothing</div>
			<div>Women's Clothing</div>
			<div>Women's Clothing</div>
			<div>Women's Clothing</div>
			<div>Women's Clothing</div>
		</div>

		<div class="nav-tab" data-attribute="product_b">Men's Clothing</div>
		<div class="nav-tab-sub-category">
			<div>Men's Clothing</div>
			<div>Men's Clothing</div>
			<div>Men's Clothing</div>
			<div>Men's Clothing</div>
			<div>Men's Clothing</div>
		</div>

		<div class="nav-tab" data-attribute="product_c">Phones and Accessories</div>
		<div class="nav-tab-sub-category">
			<div>Phones and Accessories</div>
			<div>Phones and Accessories</div>
			<div>Phones and Accessories</div>
			<div>Phones and Accessories</div>
			<div>Phones and Accessories</div>
		</div>
</div>

Answer 1

我不确定我知道什么是＆＃34;折叠标签＆＃34;或者＆＃34;倒塌＆＃34;选项卡在您的问题中，但您不能简单地添加：

sideNav.addEventListener('mouseout', function(e){
    const nodes = Array.from(e.target.parentNode.querySelectorAll('.nav-tab-sub-category'));
    nodes.forEach(nodes => nodes.style.display = "none");
});

当鼠标光标位于父元素

1 个答案: