移動端點擊展開菜單js代碼

html代碼：

<div class="menu">
    <i></i>
    <i></i>
    <i></i>
</div>

css代碼：

.hdCon .menu{width: 40px;border-radius: 3px;border: 1px solid rgb(226, 110, 15);padding: 4px 0;cursor: pointer;}
.hdCon .menu i{display: block;width: 30px;height: 2px;background: rgb(49, 151, 40);margin: 6px 5px;}
.menu.active i{transform-origin: left;transition: 0.3s;}
.menu.active i:nth-child(1){transform: rotate(32deg);}
.menu.active i:nth-child(2){opacity: 0;}
.menu.active i:nth-child(3){transform: rotate(-32deg);}

js代碼：

$(function() {
    //點擊切換菜單
    $(".menu").click(function(){
        $(this).toggleClass("active")
        $(".hdNav").slideToggle()
    })
})

.hdNav是隱藏的盒子