如何隐藏手机上下拉菜单的子链接？

Question

我已经为本地保龄球俱乐部的responsive navbar with dropdown调整了W3Schools的website，该外观在PC和移动设备上看起来都不错，]

[一个例外-在移动设备上，子菜单最初被隐藏，然后在单击按钮时显示。我想做的是单击同一按钮时再次关闭它们。目前，这只能通过单击屏幕上的其他位置来实现。

我对编程（特别是Java语言）还很陌生，一直无法找到解决方案，因此，我们将不胜感激任何帮助/建议。

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
@media only screen and (max-width: 499px) {
  /* Set width of nav */
  nav {
    min-width: 100%;
  }
  /* Set width and style of primary container */
  .topnav {
    overflow: hidden;
    background-color: #333;
  }
  /* Insert home icon */
  .topnav #homebutton {
    line-height: 3rem;
    font-size: 2rem;
  }
  /* Style primary and secondary <a> links */
  .topnav a {
    float: left;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 0 10px;
    text-decoration: none;
    font-size: 1rem;
    line-height: 3rem;
  }
  /* Set width and border of primary <a> links */
  .topnav>a {
    width: auto;
  }
  /* Set width of dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
    line-height: 3rem;
  }
  /* Set width, border and style of primary dropdown buttons */
  .dropdown .dropbtn {
    font-size: 1rem;
    border: none;
    outline: none;
    color: #ffffff;
    padding: 0 10px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    line-height: 3rem;
    width: auto;
  }
  /* Hide and style secondary dropdown container */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f2f2f2;
    z-index: 1;
  }
  /* Style secondary dropdown <a> links */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 0 30px;
    text-decoration: none;
    display: block;
    text-align: left;
    line-height: 3rem;
  }
  /* Style primary links on hover */
  .topnav a:hover,
  .dropdown:hover .dropbtn {
    background-color: #555;
    color: #ffffff;
  }
  /* Style secondary links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
    color: #000000;
  }
  /* Display secondary container */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  @media screen and (max-width: 499px) {
    .topnav a:not(:first-child),
    .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  @media screen and (max-width: 499px) {
    .topnav.responsive {
      position: relative;
    }
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      border-bottom: 1px solid black;
    }
    .topnav.responsive .dropdown {
      float: none;
    }
    .topnav.responsive .dropdown-content {
      position: relative;
    }
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
      border-bottom: 1px solid black;
    }
  }
}

@media only screen and (min-width: 500px) {
  /* Set width of nav */
  nav {
    min-width: 100%;
  }
  /* Set width and style of primary container */
  .topnav {
    overflow: hidden;
    background-color: #333;
    width: 100%;
  }
  /* Insert home icon */
  .topnav #homebutton {
    line-height: 3rem;
    font-size: 1.5rem;
  }
  /* Style primary and secondary <a> links */
  .topnav a {
    float: left;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 0 0;
    text-decoration: none;
    font-size: 1rem;
    line-height: 3rem;
  }
  /* Set width and border of primary <a> links */
  .topnav>a {
    width: calc(14.28571428571429% - 1px);
    border-right: 1px solid #ffffff;
  }
  /* Set width and border of penultimate primary <a> link */
  .topnav>a:nth-last-of-type(2) {
    width: 14.28571428571429%;
    border-right: 0;
  }
  /* Hide hamburger */
  .topnav .icon {
    display: none;
  }
  /* Set width of dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
    line-height: 3rem;
    width: 14.28571428571429%;
  }
  /* Set width, border and style of primary dropdown buttons */
  .dropdown .dropbtn {
    font-size: 1rem;
    border: none;
    outline: none;
    color: #ffffff;
    padding: 0 0;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    line-height: 3rem;
    width: calc(100% - 1px);
    border-right: 1px solid #ffffff;
  }
  /* Hide and style secondary dropdown container */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f2f2f2;
    width: 14.28571428571429%;
    z-index: 1;
  }
  /* Style secondary dropdown <a> links */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 0 10px;
    text-decoration: none;
    display: block;
    text-align: left;
    line-height: 3rem;
  }
  /* Style primary links on hover */
  .topnav a:hover,
  .dropdown:hover .dropbtn {
    background-color: #555;
    color: #ffffff;
  }
  /* Style secondary links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
    color: #000000;
  }
  /* Display secondary container */
  .dropdown:hover .dropdown-content {
    display: block;
  }
}
<nav>
  <div class="topnav" id="myTopnav">

    <a href="#" id="homebutton" class="fa fa-home">Item 1</a>

    <div class="dropdown">
      <button class="dropbtn">Item 2
    <i class="fa fa-caret-down"></i>
   </button>
      <div class="#">
        <a href="#">Item 2.1</a>
        <a href="#">Item 2.2</a>
      </div>
    </div>

    <a href="#">Item 3</a>

    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;
</a>

  </div>
</nav>

我已经通过下拉菜单调整了W3Schools的响应式导航栏，该菜单位于我本地保龄球俱乐部的网站上，该网站在PC和移动设备上看起来都很不错。除了一个例外-在移动设备上，子菜单最初是...

Answer 1

这里是一个简单的例子。现在您必须将我的示例的功能集成到您的示例中... 但我将由您自己决定：）