js.jq 초보 질문 입니다.
본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery/jquery-3.5.1.min.js"></script>
<script>
/* $(function(){
$(".sub").css('display','none');
$(".menu>li").click(function(){
console.log("@");
$(this).find(".sub>li>a").stop().slideToggle(500);
});
});*/
var close=document.getElementsByClassName(".sub");
var menu=document.getElementsByClassName(".menu");
close.addEventListener("click",function(){
console.log("@");
if(close.style.display=="none"){
close.style.display="block";
}else{
close.style.display="none";
}
});
</script>
</head>
<body>
<div class="container">
<div class="nav">
<ul class="menu">
<li><a href="#">link</a></li>
<ul class="sub" display="none";>
<li><a href="#">link1</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link1</a></li>
</ul>
<li><a href="#">link2</a></li>
<ul class="sub">
<li><a href="#">link2</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link2</a></li>
</ul>
</ul>
</div>
</div>
</body>
</html>
이 문제를 제이쿼리랑 자바스크립트로 풀어보고 싶습니다..
아코디언 메뉴 문제 인데요.
-문제 설명-
1)상단 메뉴를 누르면 서브 메뉴가 아래에 나오고
2)다시 상단 메뉴를 클릭하면 서브 메뉴가 닫히는 문제 입니다
-질문자의 문제점-
1)제이쿼리는 콘솔에는 찍히나 작동이 안되는게 문제 입니다.
2)자바스크립트는 콘솔에도 안 찍히고 작동이 인됩니다.
3)에러 명칭은 이렇게 뜹니다.
이 에러는 정확히 어떤것을 의미 하는가요?
(close.addEventListener is not a function
at navjauery.html:18)
어디가 문제 인지 선배님들께서 같이 찾아 봐주시면 감사드리겠습니다.
혼자 공부하는 거라 그런걸까요?
자바스크립트라는게 너무 힘드네요..
자바스크립트 공부 팁도 알려주시면 감사하겠습니다..
답변 1
문제부터 조금 잘못 된 느낌이 드네요.... ㅠ
.menu>li 를 클릭하면 나오는 이벤트가 아니라
각 클릭 별로 클래스 이름을 구분한다거나 해야 할것 같습니다.
함수 부분도 잘못 되었고 최초 선언 부분도 ㅠ
여튼 Jquery로 간단하게 호다닥 짜면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
window.addEventListener("load",function(){
$(".menu>li").click(function(){
$('.sub').toggle();
});
});
</script>
</head>
<body>
<div class="container">
<div class="nav">
<ul class="menu">
<li><a href="#">link</a></li>
<ul class="sub" display="none";>
<li><a href="#">link1</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link1</a></li>
</ul>
<li><a href="#">link2</a></li>
<ul class="sub">
<li><a href="#">link2</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link2</a></li>
</ul>
</ul>
</div>
</div>
</body>
</html>
간단하게 하자면 걍 생각하신 것처럼 토글로 하시면 되구요
바닐라JS로 하면 너무 길고 시간이 없으니 패스..... ㅎ
Jquery는 필요하신대로 공부하시면 될것 같구요
JS 는 유튜브에 뉴렉처 라는 분거 강의 함 들어보세요
도움 많이 되실거에요 저도 jq > js로 바꿀때 공부 많이 했었구요
