2017-02-06 12 views
-1

に動作していないと、それは私にエラーを与える:私のドロップダウンボタンメニューは、私はHTML、CSSおよびJavScriptを使用していnavgationバー

ERR_FILE_NOT_FOUND

だから、ナビゲーションバーでの私のドロップダウンボタンメニューが動作していないフォーム何らかの理由。私は間違いや誤りを見つけようとしたが、唯一のものは見つけられなかった。

また、すべてのファイルを1つのフォルダに入れます。

<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> 
+0

エラーを動作するllad画像ですか? –

+0

なぜ 'head'タグにすべてのコードを入れていますか? –

+0

htmlが読み込まれた後、bodyにjsコードを追加する必要があります。まだロードされていない間にidで要素を取得しようとしています – Chiller

答えて

0

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

以下使用jQueryのコードとCSSでMyFunctionを() を除去し、

.myDropdown{ 
    display:none; 
} 

を設定し、それは

+0

jQueryライブラリを含めることを忘れないでください。 –

+0

@Nooshi:私は知っている –

関連する問題