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

Question

我调整了 W3Schools 的 responsive navbar with dropdown for my local bowling club's website，它在 PC 和移动设备上看起来和运行良好。

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

我对编程还很陌生（尤其是 Javascript）并且一直找不到解决方案，因此任何 help/suggestions 将不胜感激。

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>

Answer 1

这是一个简单的例子。现在您必须将我的示例的功能集成到您的示例中......但我会把它留给你:) 如果它不起作用，你可以联系我或给我你的真实项目来解决这个问题！

var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';

$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();

hideMenu = function() {
    $('#navigation ul#menu').hide();
    $('#navigation').removeClass('open');
    $('#toggle').text(showMenuText);
}

$('#toggle').click(function(event){
    event.stopPropagation(); event.preventDefault();
    $('#navigation ul#menu').toggle();
    $('#navigation').toggleClass('open');
    var toggleText = $('#toggle').text();
    (toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);
});

$('ul#menu > li > a').click(function(event){
    $this = $(this);
    if( $this.hasClass('page') ) parent.location = $this.attr('href');
    if( $this.hasClass('home') ) { parent.location = '/'; }

    event.preventDefault(); event.stopPropagation();
    if( $this.hasClass('active') ) var justclosed = true;
    $('a.active').removeClass('active').next('ul').hide();
    if(!justclosed) $this.addClass('active').next('ul').show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="navigation">
<p><a href="" id="toggle">Menu</a></p>

<ul id="menu">
 <li>
  <a href="testen.html" class="book-campaigns">Menu 1</a>
  <ul>
   <li><a href="testen.html" class="lol">lol</a></li>
   <li><a href="#" class="lol">lol2</a></li>
   <li><a href="#" class="lol">lol</a></li>
   <li><a href="#" class="lol">lol2</a></li>
     </ul>
    </li>

    <li>
    <a href="/#" class="book-campaigns">Menu 2</a>
     <ul>
      <li><a href="#" class="lol">lol</a></li>
   <li><a href="#" class="lol">lol2</a></li>
   <li><a href="#" class="lol">lol</a></li>
   <li><a href="#" class="lol">lol2</a></li>
     </ul>
    </li>
    
    <a href="https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png" class="book-campaigns">Whosebug</a>

    <li>
     <a href="/#" class="book-campaigns">Menu 3</a>
  <ul>
         <li><a href="#" class="lol">lol</a></li>
   <li><a href="#" class="lol">lol2</a></li>
   <li><a href="#" class="lol">lol</a></li>
   <li><a href="#" class="lol">lol2</a></li>
     </ul>
    </li>
</ul>

好成功！

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

How can I hide sub-links of drop-down menu on mobile?

javascript

button

submenu

navigationbar