jQuery简单纵向链式操作导航栏

一个简单的纵向导航下拉菜单

HTML代码

<div id="menu">
        <div class="haschild">
            <span>第一章</span>
            <a>洗菜</a>
            <a>洗菜</a>
            <a>洗菜</a>
            <a>洗菜</a>
        </div>
        <div class="haschild">
            <span>第二章</span>
            <a>烧饭</a>
            <a>烧饭</a>
            <a>烧饭</a>
            <a>烧饭</a>
        </div>
        <div class="haschild">
            <span>第三章</span>
            <a>吃饭</a>
            <a>吃饭</a>
            <a>吃饭</a>
            <a>吃饭</a>
        </div>
    </div>

 

css代码

#menu{
    width:300px;
    }
.haschild{
    background:#555;
    color:#fff;
    cursor:pointer;
    border-bottom:1px solid #bebebe;
    }
.highlight{
    color:#fff;
    background:#green;
    }
div a{
    background:#888;
    display:none;
    float:left;
    width:300;
    }

 

jq代码

$(document).ready(function(){
    $(".haschild").click(function(){
        $(this).addClass("highlight")//为当前元素增加highlight类
            .children("a").show().end()//将子节点的<a>元素显示出来并重新定位到上次操作的元素
        .siblings().removeClass("highlight")//获取元素兄弟元素，并去掉highlight类
            .children("a").hide();//将兄弟元素下的<a>元素隐藏
    });
});

效果如下：