Question

我正在使用HTML，CSS和JavScript，它给我一个错误：

ERR_FILE_NOT_FOUND

因此导航栏中的下拉按钮菜单无法正常工作。我试图找到一个错误或错误，但我找不到唯一的东西。

我还将所有文件放在一个文件夹中。

<html>

<title>App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">  
<head> 
<!-Javascript code-->
<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>**strong text**   
<!-navbar and drop down button-->
<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Find</a>

            <div class="dropdown-content" id="myDropdown">
              <a href="#">link</a>
              <a href="#">link</a>
              <a href="#">link</a>
            </div>

    </li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

<!- IMAGE AND BUTTON-->**strong text**
<div id="wrapperHeader">
    <div id="header">
             <img src="gril.png" width="1000" height="500" alt="logo" />

              <button>Get Started</button>
    </div> 
  </div>
</head>
  <body>
  </body>
</html>

Answer 1

使用下面的jQuery代码

$('.dropbtn').click(function(){
    $('myDropdown').toggle();
});

并删除myFunction（）在css中，设置

.myDropdown{
     display:none;
 }

那么它会起作用

我的下拉按钮菜单在导航栏中不起作用

1 个答案: