JavaScript:无法将display设置为none，因为它将自己设置为block

Question

我有一个下拉菜单，里面有项目，我试着制作它，这样当你经过一个插入项目时，第二个项目会出现在它下面，当你没有悬停在上面时，它就会消失。问题是，如果你把它调用extend的光标再次放上去，第二个项目不会消失。我该怎么修？

提前感谢！(该项目的显示默认设置为无(

我试着把项目分开，这样第一个项目就不会再切换第二个项目，但我用javascript没能做到。https://i.stack.imgur.com/nkzP7.jpg

function extend(i) {
document.getElementById(i).className = "extend";
document.getElementById(i).style.display = "block";
document.getElementById(i).style.backgroundColor = "#383838";
document.getElementById(i).addEventListener("mouseleave",function() { retract(i); });
return;
}
function retract(i){
document.getElementById(i).style.display = 'none';
return;
}

下拉列表是在html 中创建的

<div class="dropdown" id="links">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<a href="../index.html">StarLink</a>
<a href="s_page1.html" onmouseover="extend(1);">StarLink Concerns ></a>
<div class="extend";>
<a style="display: none;" id="1" onmouseleave="retract(1);" href="sub/sub_page1.html">SpaceX ></a>
</div>
<a href="s_page2.html" onmouseover="extend(2);">Second Page></a>
<div class="extend";>
<a style="display: none;" id="2" onmouseleave="retract(2);" href="sub/sub_page2.html">Sub Page 2></a>
</div>
<a href="s_page3.html" onmouseover="extend(3);">Third Page></a>
<div class="extend";>
<a style="display: none;" id="3" onmouseleave="retract(3);" href="sub/sub_page3.html">Sub Page 3></a>
</div>
<a href="s_page4.html" onmouseover="extend(4);">Fourth Page></a>
<div class="extend";>
<a style="display: none;" id="4" onmouseleave="retract(4);" href="sub/sub_page4.html">Sub Page 4></a>
</div>
<a href="s_page5.html">Fifth Page</a>
<a href="s_page6.html">Sixth Page</a>
<a href="s_page7.html">Launch Video</a>
</div>
</div>

Answer 1

尽量在CSS中保持样式。如果你使用得当，CSS是非常强大的。使用:hover伪选择器可以在悬停项目时设置项目的样式。由于您有一个要作为目标的同级元素，请使用+选择器来选择需要操作的相邻元素。

.dropdown-content a {
display: block;
padding: 15px;
background: #111111;
color: white;
text-decoration: none;
}
.dropdown-content .extend a {
display: none;
background-color: #383838;
color: white;
}
.dropdown-content > a:hover + .extend a,
.dropdown-content .extend a:hover{
display: block;
}

<div class="dropdown" id="links">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<a href="../index.html">StarLink</a>
<a href="s_page1.html">StarLink Concerns ></a>
<div class="extend">
<a id="1" href="sub/sub_page1.html">SpaceX ></a>
</div>
<a href="s_page2.html">Second Page></a>
<div class="extend">
<a id="2" href="sub/sub_page2.html">Sub Page 2></a>
</div>
<a href="s_page3.html">Third Page></a>
<div class="extend">
<a id="3" href="sub/sub_page3.html">Sub Page 3></a>
</div>
<a href="s_page4.html">Fourth Page></a>
<div class="extend">
<a id="4" href="sub/sub_page4.html">Sub Page 4></a>
</div>
<a href="s_page5.html">Fifth Page</a>
<a href="s_page6.html">Sixth Page</a>
<a href="s_page7.html">Launch Video</a>
</div>
</div>