移动端点击展开菜单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是隐藏的盒子