2017-02-06 2 views
-1

Я использую HTML, CSS и JavScript и это дает мне ошибку:Моя кнопка меню выпадающей не работает в navgation баре

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

ошибка, когда llad изображение? –

+0

Почему вы вставляете весь код в тег 'head'? –

+0

вам нужно добавить js-код в тело после загрузки html .... вы пытаетесь получить элемент по id, пока его еще не загрузили – Chiller

ответ

0

используйте код JQuery ниже

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

и удалить туРипсЫоп() в CSS, установите

.myDropdown{ 
    display:none; 
} 

то он будет работать

+0

не забудьте включить библиотеку jQuery –

+0

@Nooshi: если это сработает, пусть я знаю –

Смежные вопросы