jQuery实现二级菜单和箭头旋转
jQuery实现二级菜单和箭头旋转
2020年12月14日 411 阅读
  • 首页
  • /
  • 笔记
  • /
  • 正文
  • 对于网站分类比较多的,jQuery实现二级菜单和箭头旋转这个效果很实用。为了少走弯路,实践成功后我决定留下备用。

    CSS部分

    <style>
    .nav-item,.subnav-item{list-style-type:none;cursor:pointer;background:#f0f0f0;padding:10px;}
    .subnav-item a {line-height:40px;display:block;border-bottom: 1px solid #d1d1d1;}
    .nav-item svg.icon {margin:auto;width:20px;height:20px;float:right;}
    .nav-item:hover:before {height:100%;}
    .subnav {display:none;text-indent:2em;background:#d1d1d1;}
    .subnav-item:hover {background:#f0f0f0;}
    </style>

    html部分

    <li class="nav-item">
        <a href="javascript:;">父级菜单
            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <path d="M381.57809 345.996199c-2.908236 4.233418-4.614088 9.380648-4.614088 14.892175s1.705851 10.658757 4.614088 14.922874L544.443411 539.42256c10.32209 10.324136 10.32209 27.042913 0 37.381375L385.842207 735.921909c-5.376451 4.843308-8.771781 11.818163-8.771781 19.61371 0 14.602579 11.83249 26.433022 26.434046 26.433022 5.953595 0 11.420097-1.979074 15.835663-5.298679l5.300726-5.299703 175.866427-175.884846c20.650319-20.647249 20.650319-54.114478 0-74.763774L422.95036 343.132988l-1.811252-1.794879c-4.690836-4.264117-10.903328-6.884804-17.740036-6.884804C394.339742 334.453305 386.34465 339.02339 381.57809 345.996199z" p-id="10713"></path>
            </svg>
        </a>
    </li>
    <div class="subnav">
        <div class="subnav-item">
            <a href="#">我是老大</a>
            <a href="#">我是老二</a>
        </div>
    </div>

    jquery部分

    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
    <script>
    $(document).ready(function(){
        var isTrue = false;
        $(".nav-item").click(function () {
            $(this).next(".subnav").slideToggle();
            if (isTrue) { 
                $(this).find("svg").css("transform", "rotate(0deg)");  
                isTrue = false;
            }else {
                $(this).find("svg").css("transform", "rotate(90deg)");
                isTrue = true;
            }
        }); 
    });
    </script>

    效果可以查看本站的移动端侧边栏导航。

    1

    评论 (0)

    取消