jQuery的addClass，children，show

ruiguang21發表於2017-12-26
jQuery
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/jquery-3.0.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
    //等待dom元素載入完畢
    $(document).ready(function () {
        $(".has_children").click(function()
        {
            //為當前元素增加highlight類
//將子節點的a元素顯示出來並重新定位到上次操作的元素

            $(this).addClass("has_children").children("a").show().end()
                .siblings().removeClass("highlight").children("a").hide();
        })

    })
</script>
<style type="text/css">
    #menu {
        width:300px;
    }
    .has_children{
        background : #555;
        color :#fff;
        cursor:pointer;
    }
    .highlight{
        color : #fff;
        background : green;
    }
    div{
        padding:0;
    }
    div a{
        background : #888;
        display : none;
        float:left;
        width:300px;
    }
</style>

<div id="menu">
    <div class="has_children">
        <span>第1章-認識jQuery</span>
        <a>1.1-JavaScript和JavaScript庫</a>
        <a>1.2-加入jQuery</a>
        <a>1.3-編寫簡單jQuery程式碼</a>
        <a>1.4-jQuery物件和DOM物件</a>
        <a>1.5-解決jQuery和其它庫的衝突</a>
        <a>1.6-jQuery開發工具和外掛</a>
        <a>1.7-小結</a>
    </div>
    <div class="has_children">
        <span>第2章-jQuery選擇器</span>
        <a>2.1-jQuery選擇器是什麼</a>
        <a>2.2-jQuery選擇器的優勢</a>
        <a>2.3-jQuery選擇器</a>
        <a>2.4-應用jQuery改寫示例</a>
        <a>2.5-選擇器中的一些注意事項</a>
        <a>2.6-案例研究——類似淘寶網品牌列表的效果</a>
        <a>2.7-還有其它選擇器麼？</a>
        <a>2.8-小結</a>
    </div>
    <div class="has_children">
        <span>第3章-jquery中的DOM操作</span>
        <a>3.1-Dom操作的分類</a>
        <a>3.2-jQuery中的DOM操作</a>
        <a>3.3-案例研究——某網站超連結和圖片提示效果</a>
        <a>3.4-小結</a>


    </div>


</div>

</body>
</html>

相關文章