Closed
Description
증상
코드를 짜고 실행 시 드롭다운 하위 메뉴가 나오지 않습니다.
페이지 요소검사 결과 캡쳐한 부분과 같은 오류가 발생하는데, 함수의 내용을 지속적으로 바꿔도 일단 변하지 않습니다.
실행환경
윈도우/ 크롬에서 실행
<!doctype html>
<html>
<head>
<title>Jessie</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="colors.js" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">About_Jessie
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</div>
<a href= "2.html">Likes</a>
<a href= "3.html">Portfolio</a>
<a href= "4.html">Contacts</a>
</div>
-----------------------------------------------------------------colors.js 파일-----------
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 myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}캡쳐
