如何在手機上隱藏下拉菜單的子鏈接？

Question

我已經為我當地的保齡球俱樂部的網站調整了 W3Schools 的響應式導航欄和下拉菜單，該網站在 PC 和移動設備上看起來和工作正常。

除了一個例外 - 在移動設備上，子菜單最初是隱藏的，然后在單擊按鈕時顯示。 我想做的是在單擊同一個按鈕時再次關閉它們。 目前，這只能通過單擊屏幕上的其他位置來實現。

我對編程（尤其是 Javascript）相當陌生，並且無法找到解決方案，因此我們將不勝感激任何幫助/建議。

 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">Stackoverflow</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>

好成功！