豎直手風琴導航菜單欄 - iriliguo－IT工程師數位筆記本

文章出處

之前有用原生js實現了菜單欄的展開收縮效果，今天用jquery實現這個效果，

并增加了鼠標點擊箭頭方向改變的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.0.min.js"></script>
    <style>
        li {
            list-style-type: none;
        }

.frame {
    width: 200px;
   margin: 20px auto;
}
.frame .nav {
   background: black;
    color: white;
    padding: 5px;
}
.nav .label{
   padding: 5px 10px ;
}
.nav .arrow{
    display:block;
    width:16px;
    height:16px;
    background:no-repeat center;
    float:right;

}
        .arrow.up{background-image:url(images/arrow_u.png);}
        .arrow.down{background-image:url(images/arrow_d.png);}
        .menu{
            background: gainsboro;
            display:none;

        }
        .menu li {
          /* border: 1px solid;*/
            margin-left: -20px;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
<ul class="frame">
    <li>
        <div class="nav">
            <span class="label">水果</span>
            <span class="arrow down"></span>
        </div>
        <ul class="menu show">
            <li>葡萄</li>
            <li>栗子</li>
        </ul>
    </li>
    <li>
        <div class="nav">
            <span class="label">糖果</span>
            <span class="arrow up"></span>
        </div>
        <ul class="menu">
            <li>巧克力</li>
            <li>太妃糖</li>
        </ul>
    </li>
</ul>
<script>
    $(".nav").click(function () {
        var arrow = $(this).find(".arrow");
        if(arrow.hasClass("up")){
            arrow.removeClass("up").addClass("down");
        }else if(arrow.hasClass("down")){
            arrow.removeClass("down").addClass("up");
        }//改變箭頭的方向
        $(this).parent().find(".menu").slideToggle();//改變二級導航菜單的顯示狀態
    })
</script>
</body>
</html>