[JQuery] 제이쿼리 메서드(class search)

Class Control 종류

• children -> 선택 요소의 자식 요소들
• siblings -> 선택 요소의 제외된 요소들

- children

    <ul class="menu">
        <li>
            <a href="#none">MENU-1</a>
            <div class="sub-menu">
                <a href="#none">SUB-MENU1</a>
                <a href="#none">SUB-MENU2</a>
                <a href="#none">SUB-MENU3</a>
                <a href="#none">SUB-MENU4</a>
            </div>
        </li>
        <li>
            <a href="#none">MENU-2</a>
            <div class="sub-menu">
                <a href="#none">SUB-MENU1</a>
                <a href="#none">SUB-MENU2</a>
                <a href="#none">SUB-MENU3</a>
                <a href="#none">SUB-MENU4</a>
            </div>
        </li>
    </ul>

 

$('.menu li').mouseenter(function(){
    $(this).children('.sub-menu').stop().slideDown()   
})

$('.menu li').mouseleave(function(){
    $(this).children('.sub-menu').stop().slideUp()   
})

 

.menu{
    padding: 0;
    list-style: 200px;
    width: 200px;
    text-align: center;
}

.menu li > a{
    background-color: #000;
    color: #fff;
    display: block;
    padding: 5px;
    border: 1px solid #ddd;
}
.sub-menu{
    border: 1px solid #000;
    display: none;
}
.sub-menu a{
    display: block;
    padding: 5px;
}

01

결과

해당 메뉴 버튼에 마우스를 오버하면 하위 메뉴가 생성되는 것을 볼 수 있다.

 

- siblings

    <div class="btn">
        <span>공지사항</span>
        <span>갤러리</span>
    </div>

 

$('.btn span').click(function(){
    $(this).addClass('active')
    $(this).siblings().removeClass('active')
})

 

.btn{
    width: 300px;
}

.btn span{
    background-color: #ccc;
    padding: 5px;
    width: 100px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

.btn span.active{
    background-color: #fff;
    border: 1px solid #000;
}

012

결과

해당 버튼을 누르면 흰색 배경으로 변하고 다른 자식 요소들의 배경 색은 다시 변경되는 것을 확인할 수 있다.