基于JQuery实现点击触发下拉菜单滑入滑出效果

你完全不需要重写现有代码，只做小调整就能实现滑动效果！你之前尝试slideDown()和slideUp()没成功，大概率是因为直接修改display属性的逻辑和jQuery滑动方法冲突了——jQuery的滑动动画是通过动态修改元素高度实现的，而非直接切换display状态。

下面给你两种可行的修改方案：

方案一：用jQuery的slideToggle()（最简单高效） #

直接替换掉原来的display判断逻辑，slideToggle()会自动处理滑动显示/隐藏的动画状态：

修改后的JavaScript代码 #

const $iconMenu1 = $('#iconMenu1')
const $smallScreenMenu = $('#smallScreenMenu')

$iconMenu1.on('click', ()=>{
  $smallScreenMenu.slideToggle(); // 替换原有的display判断逻辑
})

对应的CSS（无需大幅修改） #

保持#smallScreenMenu的初始display: none即可，slideToggle()会在动画结束后自动管理display状态：

.icon-menu{
  right: 15px;
  position: absolute;
  top: 17px;
  font-size: 30px;
  background-color: transparent;
  border: none;
}
#smallScreenMenu{
  display: none;
  position: absolute;
  right: 0px;
  text-align: right;
  /* 可选：加背景色让滑动效果更直观 */
  background-color: #fff;
  padding: 1rem;
}

方案二：用CSS过渡动画（轻量化无依赖） #

如果不想依赖jQuery的动画方法，也可以用CSS的max-height过渡实现滑动效果，这种方式更灵活：

修改后的CSS代码 #

.icon-menu{
  right: 15px;
  position: absolute;
  top: 17px;
  font-size: 30px;
  background-color: transparent;
  border: none;
}
#smallScreenMenu{
  max-height: 0; /* 默认收起状态 */
  overflow: hidden; /* 隐藏超出内容 */
  transition: max-height 0.3s ease; /* 滑动过渡动画 */
  position: absolute;
  right: 0px;
  text-align: right;
  background-color: #fff;
  padding: 0 1rem;
}
/* 新增类控制展开状态 */
#smallScreenMenu.active{
  max-height: 200px; /* 设置足够容纳菜单的高度 */
}

修改后的JavaScript代码 #

const $iconMenu1 = $('#iconMenu1')
const $smallScreenMenu = $('#smallScreenMenu')

$iconMenu1.on('click', ()=>{
  $smallScreenMenu.toggleClass('active'); // 切换active类触发动画
})

两种方案都能实现你想要的滑动效果，方案一更省心，方案二更灵活可控，你可以根据需求选择～

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