利用Jquery实现滑动出现下拉菜单和箭头转向

1.引入

<script src="js/jquery-1.11.1.min.js"></script>

2.HTML代码

给ul标签设置id：left_item，给img设置id：item_img

<!-- 中间左边开始 -->
            <div class="tpl-left-nav fl">
                <ul class="tpl-left-nav-item" id="left_item">
                    <li>
                        <a href="#">我的下拉菜单</a>
                        <img id="item_img" class="fr" src="images/arr-right.png">
                    </li>
                </ul>
                <div id="left_menu">
                    <ul class="tpl-left-nav-menu">
                        <li><a href="#">菜单1</a></li>
                        <li><a href="#">菜单2</a></li>
                        <li><a href="#" class="menu-active">菜单3</a></li>
                        <li><a href="#">菜单4</a></li>
                        <li><a href="#">菜单5</a></li>
                    </ul>
                </div>

            </div>
            <!-- 中间左边结束 -->

3.CSS代码

/* 中间左边开始 */
.tpl-left-nav {
    width: 376px;
    background-color: #fff;
    border-radius: 6px;
    padding-top: 21px;
    box-shadow: 0px 3px 8px 0px rgba(179, 179, 179, 0.36);
    overflow: hidden;
}

.tpl-left-nav li {
    height: 52px;
    line-height: 52px;
    width: 100%;
    padding-left: 45px;
    font-size: 22px;
    font-family: MicrosoftYaHei;
}

.tpl-left-nav .tpl-left-nav-item li {
    padding-left: 38px;
}

.tpl-left-nav-item li img {
    margin-right: 30px;
    margin-top: 19.5px;
}

.tpl-left-nav .tpl-left-nav-item li {
    cursor: pointer;
    background: rgba(61, 132, 243, 0.1);
    border-left: 7px solid #3D84F3 !important;
}
.tpl-left-nav-menu li:hover{
    background-color: #f5f5f5;
}
.menu-active {
    color: rgba(61, 132, 243, 1);
}
/* 中间左边结束 */

4.1  JS代码（包括箭头旋转）

通过transform进行旋转，使用判断实现箭头来回旋转

<script type="text/javascript">
        /* 我的课堂折叠 */
        var isTrue = false;
        $(document).ready(function() {
            $("#left_item").click(function() { /* 点击我的下拉列表进行折叠并箭头切换 */
                if (isTrue) {
                    isTrue = false;
                    $("#item_img").css("transform", "rotate(0)");
                    $("#left_menu").slideToggle("500");
                } else {
                    isTrue = true;
                    $("#item_img").css("transform", "rotate(270deg)");
                    $("#left_menu").slideToggle("500");
                }
            });   
        });
    </script>

4.2 JS代码（没有箭头旋转）

slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。

<script type="text/javascript">
        /* 我的下拉菜单 */
        $(document).ready(function() {
            $("#left_item").click(function() { /* 点击我的下拉菜单进行折叠 */
                $("#left_menu").slideToggle();
            });    
        });
    </script>

5.最后效果