Question

希望我的问题很清楚

按下我在此页面上的唯一按钮，我想显示仅包含三个元素的菜单。

“语言”项目菜单包含我想要仅在用户点击“语言”时显示的子菜单

然而，只要我点击按钮，不仅会出现菜单，还会出现子菜单;这不是我想要的。

请告诉我我的代码有什么问题吗？

代码：

function myFunction2() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function myFunction3() {
  document.getElementById("languageslist").classList.toggle("show");

}

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  overflow: auto;
  border: 1px solid black;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdownb {
  position: relative;
  display: inline-block;
}
.show {
  display: block;
}

<div class="dropdown">
  <button id="btn" onclick="myFunction2()">Show</button>
  <div id="myDropdown" class="dropdown-content">
    <p>Countries</p>
    <p id="btnl" onclick="myFunction3()">Languages</p>
    <div id="languageslist">
      <a href="">English</a>
      <a href="">Spanish</a>
      <a href="">German</a>
    </div>
    <p>Continents</p>
  </div>
</div>

Answer 1

这是因为您没有在初始阶段隐藏submenu。

将课程添加到languagelist＆amp;把它藏起来。点击它可以切换课程

HTML

<div id = "languageslist" class="hide"> // add a class here
        <a href="">English</a>
        <a href="">Spanish</a>
        <a href="">German</a>
        </div>

<强> JS

function myFunction3() {
    document.getElementById("languageslist").classList.toggle("hide");
    document.getElementById("languageslist").classList.toggle("show");
}

JSFIDDLE

在javascript中下拉子菜单

1 个答案: