js.jq 초보 질문 입니다.

js.jq 초보 질문 입니다.

QA

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로 바꿀때 공부 많이 했었구요

답변을 작성하시기 전에 로그인 해주세요.
전체 1,178
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT