왼쪽 메뉴 JQuery와의 연습

<! DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 선두 > 
    < 메타 캐릭터 = "UTF-8" > 
    < 타이틀 > 제목 </ 타이틀 > 
    < 스타일 > 
        .outer { 
            높이 : 1000px ; 
            폭 : 100 % ; 
        } 
        .menu { 
            플로트 : 왼쪽 ; 
            배경 색상 : 베이지 색 ;
            폭 : 30 % ; 
            높이 : 500 픽셀 ; 
        } 
        .content { 
            플로트 : 왼쪽 ; 
            배경 색상 : rebeccapurple ; 
            폭 : 70 % ; 
            높이 : 500 픽셀 ; 
        } 
        .title { 
            배경 컬러 : 아쿠아 마린 ; 
            라인 높이 : 40px ; 
        } 
        .hide {
            디스플레이 : 없음 ; 
        } 
    </ 스타일 > 
</ 머리 > 
< 몸 > 

< DIV 클래스 = "외부" > 
    < DIV 클래스 = "메뉴" > 
        < DIV 클래스 = "항목" > 
            < DIV 클래스 = "제목" onclick을 = "쇼 (이) " >菜单一</ DIV > 
            < DIV 클래스 ="사기꾼 " > 
                < DIV >
                < DIV > 111 </ DIV > 
                < DIV > 111 </ DIV > 
            </ DIV > 
        </ DIV > 

         < DIV 클래스 = "항목" > 
            < DIV 클래스 = "타이틀" 의 onclick = "표시 (이)" >菜单二</ DIV > 
            < DIV 클래스 = "사기꾼 숨기기" > 
                < DIV > 222 </ DIV > 
                <DIV > 222 </ DIV> 
                < DIV > 222 </ DIV > 
            </ DIV > 
        </ DIV > 

         < DIV 클래스 = "항목" > 
            < DIV 클래스 = "타이틀" 의 onclick = "표시 (이)" >菜单三</ DIV > 
            < DIV 클래스 = "사기꾼 숨기기" > 
                < DIV > 333 </ DIV > 
                < DIV > 333 </ DIV > 
                <DIV > 333 </DIV > 
            </ DIV > 
        </ DIV > 

    </ DIV > 
    < DIV 클래스 = "내용" > </ DIV > 
</ DIV > 


< 스크립트 SRC = "JQuery와-3.1.1.js" > </ 스크립트 > 
< 스크립트 > 
    기능 쇼 (자기) { 
        $ (자기) 다음 내용 () removeClass (. " 숨기기 " ); 
        $ (자기) .parent ()는. 형제 자매 (). 어린이 ( " .con " ) .addClass를 ( "
</ 스크립트 > 
</ 몸 > 
</ HTML >

코드보기