底部上滑菜单展开/收起时箭头翻转及点击固定状态实现咨询

一、CSS代码修改 #

在原有CSS基础上新增/调整如下规则，完整代码如下：

.menu-mobile {
  font-weight: 100;
  background: #ffc20e;
  width: 100%;
  height: 135px;
  padding-top: 0px;
  position: fixed;
  z-index: 100;
  -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  bottom: -90px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  color: #222;
  display:block!important;
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
}
/* 悬浮展开效果，点击固定后优先级更高 */
.menu-mobile:hover, .menu-mobile:focus {
  transform: translate(0px, -120px);
}
/* 点击后固定展开的类 */
.menu-mobile.menu-open {
  transform: translate(0px, -120px);
}
.menu-mobile .title {
  position: absolute;
  left: 52%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 15px;
  font-weight: 800;
  font-size: 15px;
  color:#003D3F;
  cursor: pointer; /* 标识可点击 */
}
.menu-mobile .nav {
  position: absolute;
  left: 50%;
  top: 45px;
  width: 100%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  font-weight: 100;
  display: block;
}
.menu-mobile .nav li {
  list-style-type: none;
  background-color:#EFEFEF;
}
.arrow{
  width: 15px;
  margin-right: 7px;
  transition: transform 0.3s ease; /* 箭头翻转动画 */
  vertical-align: middle; /* 对齐菜单文字 */
}
/* 菜单收起时箭头翻转180度呈向下状态 */
.menu-mobile:not(.menu-open) .arrow {
  transform: rotate(180deg);
}

二、新增JS交互逻辑 #

将以下代码放在页面</body>标签之前即可：

const mobileMenu = document.querySelector('.menu-mobile');
const menuTitle = document.querySelector('.menu-mobile .title');

menuTitle.addEventListener('click', () => {
  mobileMenu.classList.toggle('menu-open');
});

三、功能说明 #

• 保留原有鼠标悬浮展开菜单的效果，箭头会同步变为向上状态
• 点击菜单标题后会添加menu-open类固定菜单展开状态，鼠标移出也不会收起，再次点击标题即可移除类名收起菜单
• 箭头动画和菜单展开/收起动画同步，过渡流畅

内容的提问来源于stack exchange，提问作者Designer16