JavaScript: 无法将显示设置为 none，因为它会将自己设置为阻塞

Question

我有一个下拉菜单，里面有项目，我正在努力做到这一点，当你经过某个项目时，第二个会出现在它下面，当你没有将鼠标悬停在其中一个项目上时，它就会消失。问题是，如果您使用光标向上移动，它会再次调用扩展并且第二项不会消失。我该如何解决？

提前致谢！（该项目的显示默认设置为 none）

我试图将项目分开，这样第一个项目就不会再次切换第二个项目，但我没有这样做 javascript。 https://imgur.com/a/HJsULe2

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 伪 selector 设置项目悬停时的样式。并且由于您有一个兄弟元素，您希望使用 + select 或 select 需要操作的相邻元素。

.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>

JavaScript: 无法将显示设置为 none，因为它会将自己设置为阻塞

JavaScript: Cannot set display to none, because it sets itself to block

javascript

navigation

menu

dropdown