使用 JQuery 单击下拉菜单向下滑动

Question

所以，这是我的代码，点击 $iconMenu1 后打开一个下拉菜单 $smallScreenMenuJavaScript 代码：const $iconMenu1 = $('#iconMenu1')const $smallScreenMenu = $('#smallScreenMenu')$($iconMenu1.on('click', ()=>{  if ($smallScreenMenu.css('display') == 'block'){    $smallScreenMenu.css('display', 'none');  }  else{    $smallScreenMenu.css('display', 'block');  }CSS代码：.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;HTML 代码：<button class='icon-menu' id='iconMenu1'></button><div id='smallScreenMenu'>                <ul>                     <li><a href='#'>Products</a></li>                    <li><a href='#'>About</a></li>                </ul>            </div>所以，它有效，但我想让它滑动而不是立即出现/消失。是否可以编辑此代码并获得我想要的内容，或者我是否必须从头开始编写代码？我尝试使用slideDown()和slideUp()，但没有取得任何成功。也预先感谢您的帮助

Answer 1

切换菜单的类，而不是直接操作样式。然后使用 CSS 转换来制作动画，例如一个maximum-height或其他 CSS 属性：

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

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

$($iconMenu1.on('click', () => {

$smallScreenMenu.toggleClass('closed');

  

}));

.icon-menu {

  right: 15px;

  position: absolute;

  top: 17px;

  font-size: 30px;

  background-color: transparent;

  border: none;

}

#smallScreenMenu {

  display: block;

  position: absolute;

  right: 10px;

  top: 60px;

  text-align: right;

  background: rgba(0,255,0,0.1);

  overflow-y: hidden;

  max-height: 360px;

  transition: all 360ms ease-in-out;

  box-shadow: 2px 4px 12px #bfbfbf;

}

#smallScreenMenu.closed {

   max-height: 0;

}

#smallScreenMenu ul {

  list-style-type: none;

  margin: 0.5em 1em;

  padding: 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class='icon-menu' id='iconMenu1'>Menu</button>

<div id='smallScreenMenu' class="closed">

  <ul>

    <li><a href='#'>Products</a></li>

    <li><a href='#'>About</a></li>

    <li><a href='#'>Another</a></li>

    <li><a href='#'>Another</a></li>

    <li><a href='#'>Another</a></li>

  </ul>

</div>