HTML与jQuery菜单交互示例-优快云博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>1-5-1</title>
    <style type="text/css">
        #menu
        {
            width: 300px;
        }
        .has_children
        {
            background: #555;
            color: #fff;
            cursor: pointer;
        }
        .hightlight
        {
            color: #fff;
            background: green;
        }
        div
        {
            padding: 0;
            margin: 10px 0;
        }
        div a
        {
            background: #888;
            display: none;
            float: left;
            width: 300px;
        }
    </style>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".has_children").click(function () {
                $(this).addClass("hightlight")//为当前元素增加hightlight类
                    .children("a").show().end()//子节点<a>元素显示，重新定位到上述操作元素
                .siblings().removeClass("hightlight")//获取元素的兄弟元素，去掉它们的hightlight类
                    .children("a").hide(); //兄弟元素的<a>元素隐藏
            })
        });
    </script>
</head>
<body>
    <div id="menu">
        <div class="has_children">
            <span>第一章</span> <a>1.1加入</a>
        </div>
        <div class="has_children">
            <span>第二章</span> <a>2.1加入</a>
        </div>
        <div class="has_children">
            <span>第三章</span> <a>3.1加入</a>
        </div>
    </div>
</body>
</html>