我们经常可以在网页中看到向下的箭头，并且在我们点击时，箭头会发生旋转，这又是如何做到的呢？我们来看一看，先上效果图：
可以看到，在点击箭头时，箭头的方向旋转了，并且再次点击回到原来的样子，我们看一看代码：
首先是html样式
<header><div class="nav"><button title="应用启动器"><i class="fa fa-bars"></i></button><span class="user"><a href="">Microsoft 帐户</a></span><span class="wrapper-1">|</span><div class="middle-nav"><ul><li><a href="">你的信息</a></li><li><a href="">隐私</a></li><li><a href="">安全</a></li><li class="dropdown-item"><a href="javascript:;" onclick="appearBox()">付款和计算 <iclass="fa fa-angle-down icon"></i></a><div class="dropdown-content" style="display: none;"><ul><li><a href="">订单历史记录</a></li><li><a href="">付款选项</a></li><li><a href="">通讯录</a></li><li><a href="">账单帮助</a></li></ul></div></li><li><a href="">服务和订阅</a></li><li><a href="">设备</a></li></ul></div><div class="right-nav"><a href="" title="帮助"><i class="fa fa-question"></i></a><a href="" title="的客户经理"><i class="fa fa-user-o"></i></a></div></div></header>
html代码没什么特别的，然后我们来看css代码：
body {background-color: #F2F2F2;}/* 头部样式 */.nav {height: 48px;width: 1536px;margin: 0 auto;background-color: #006FC9;display: flex;}/* 左侧按钮样式 */button {width: 48px;height: 48px;background-color: #006FC9;cursor: pointer;border: none;}button i {color: white;}button:hover {background-color: #006BC3;}/* 导航栏样式 *//* 微软图标样式 */.user {height: 48px;width: 130px;display: inline-block;text-align: center;}.user>a {color: white;line-height: 48px;font-weight: 600;}.user:hover {background-color: #006BC3;}.wrapper-1 {display: inline-flex;height: 100%;align-items: center;margin-left: 0px;color: white;}/* 中部导航栏样式 */.middle-nav {height: 48px;}.middle-nav>ul>li {float: left;margin-left: 20px;height: 48px;}.middle-nav>ul>li>a {color: white;line-height: 48px;font-size: 14px;padding: 10px;}.middle-nav>ul>li:hover {background-color: #006BC3;}i {padding-left: 3px;}/* 下拉框样式 */.dropdown-item {position: relative;}.dropdown-content {position: absolute;z-index: 10;width: 180px;height: 140px;background-color: white;box-shadow: 1px 1px 5px #D4D4D4;}.dropdown-content>ul>li {width: 180px;height: 35px;}.dropdown-content>ul>li>a {line-height: 35px;color: #201F1E;padding-left: 6px;font-size: 14px;}.dropdown-content li:hover {background-color: #F4F4F4;}.arrow {margin-left: 3px;transform: rotate(180deg);transition: all 0.5s;}.box-style {animation: move 0.1s 1 linear;}@keyframes move {from {height: 0;}to {height: 140px;}}/* 导航栏右边设置 */.right-nav {margin-left: 700px;}.right-nav>a {display: inline-block;height: 48px;width: 48px;text-align: center;}.right-nav i {color: white;line-height: 48px;}.right-nav>a:hover {background-color: #006BC3;}
最后是js代码：
// 导航栏下拉样式let content = document.getElementsByClassName("dropdown-content")[0];let dropitem = document.getElementsByClassName("dropitem")[0];let icon = document.getElementsByClassName("icon")[0]function appearBox(e) {console.log(content);if (content.style.display == "none") {content.style.display = "block"} else {content.style.display = "none" }if(icon.classList.contains("arrow")){icon.classList.remove("arrow");}else{icon.classList.add("arrow");}content.classList.add("box-style");}
好了，今天就到这里了，喜欢就关注我吧~~~~
