登录
jQuery实现二级菜单和箭头旋转
12/14
对于网站分类比较多的，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>
</div>
<div class="subnav-item">
<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>效果可以查看本站的移动端侧边栏导航。
