Javascript 下拉菜單在導航欄中未按預期工作
[英]Javascript dropdown menu not working as expected in navbar
問題描述
我是初學者，我正在嘗試使用 javascript 在導航欄中實現下拉菜單。 為此，我使用了此處顯示的 w3school 示例： https ://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click ，但它不起作用。 導航欄運行良好，但下拉菜單不起作用。
function lmyDropdown(){ document.getElementById("myDropdown").classList.toggle("show"); window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var myDropdown = document.getElementById("myDropdown"); if (myDropdown.classList.contains('show')) { myDropdown.classList.remove('show'); } } } }
<style> body { font-family: Arial, Helvetica, sans-serif; } .navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { cursor: pointer; font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0px; } .navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus { background-color: DodgerBlue; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .show { display: block; } .center{ text-align: center; color:white; } .btn { background-color: DodgerBlue; border: none; color: white; padding: 12px 16px; font-size: 16px; cursor: pointer; } .btn:hover { background-color: RoyalBlue; } input[type=text] { width: 15%; margin: 10px 10px; box-sizing: border-box; border: 2px solid black; border-radius: 4px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=number] { width: 15%; margin: 10px 10px; box-sizing: border-box; box-sizing: border-box; border: 2px solid black; border-radius: 4px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=button] { width: 5%; margin: 10px 3px; box-sizing: border-box; } input[type=text]:focus { background-color: lightblue; width: 30%; } input[type=number]:focus { background-color: lightblue; width: 30%; } #filtersubmit { position: relative; z-index: 1; left: -30px; top: 1px; color: #7B7B7B; cursor: pointer; width: 0; } select { width: 10%; padding: 20px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; bottom:1px; } #myTable { float: left; width : 40%; //border: 1px solid black; margin: 10px 10px; } .header { background-color: DodgerBlue; padding: 20px; text-align: center; } #myTable::after { content: ""; display: table; clear: both; } .footer { background-color: DodgerBlue; padding: 10px; color:white; margin-top:300px; position:fixed; bottom:0; width:100%; } </style>
<html> <head> <title>Page Title</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body onload = "storage()"> <div class="header"> <h1 class="center">Web Site</h1> </div> <div class="navbar"> <a href="#">Home</a> <a href="#">News</a> <div class="dropdown"> <button class="dropbtn" onclick="lmyDropdown()">Contact <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content" id="myDropdown"> <a href="# " target="_blank">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#" style="float:right">About</a> </div> <br><br><br> <button onclick ="window.location.href='newsite.html';" class="btn"> <i class="fa fa-home"></i></button> <select id="mySelect" onchange="myFunction2()"> <option value="Value1">Value1</option> <option value="Value2">Value2</option> <option value="Value3">Valu3</option> </select> <br><br> <form> Name: <br> <input type="text" id="id1" name="fname" placeholder= "Search"> <i id="filtersubmit" class="fa fa-search"></i> <p id="demo2" style='color:red;'> </p> <p id="demo4" style='color:red;'> </p> <br> Value: <br> <input type="number" id="id2" name="fvalue"> <p id="demo3" style='color:red;'> </p> <br><br> <input type="button" value="add" onclick="appendrow()" > <input type="button" value="delete" onclick="deleterow()"> <input type="button" value="search" onclick="newappend()"> <input type="text" id="id3" placeholder= "Search"> <i id="filtersubmit" class="fa fa-search"></i> <input type="text" id="id4" placeholder="Search"> <i id="filtersubmit" class="fa fa-search"></i> </form> <p id="demo1"></p> <table id ="myTable" class="table table-striped"> <thead> <tr> <th>Name</th> <th id="demo"> <span onclick="myFunction()"> </span> </th> </tr> </thead> <tbody> <tr> <td>Tizio</td> <td>15</td> </tr> <tr> <td>Caio</td> <td>10</td> </tr> <tr> <td>Sempronio</td> <td>8</td> </tbody> </table> <br><br> <div class="footer"> <div class="left"> Alestack - @2020 - all right reserved. [<a href="" title="Credits" style="color:black;">Credits</a>] </div> </div>
誰能幫我？
1 個解決方案
解決方案1
2 已采納 2020-01-14 11:49:41
你可能使用過引導程序並且有一個 css 類沖突問題，基本上你使用了一個與引導程序同名的類
Javascript / Navbar下拉列表不適用於Twitter Bootstrap
[英]Javascript/Navbar Dropdown Not Working With Twitter Bootstrap
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.