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

Question

所以，这是我的代码，点击 $iconMenu1 后打开一个下拉菜单 $smallScreenMenu

JavaScript 代码：

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');&nbsp;&nbsp;}));.icon-menu {&nbsp; right: 15px;&nbsp; position: absolute;&nbsp; top: 17px;&nbsp; font-size: 30px;&nbsp; background-color: transparent;&nbsp; border: none;}#smallScreenMenu {&nbsp; display: block;&nbsp; position: absolute;&nbsp; right: 10px;&nbsp; top: 60px;&nbsp; text-align: right;&nbsp; background: rgba(0,255,0,0.1);&nbsp; overflow-y: hidden;&nbsp; max-height: 360px;&nbsp; transition: all 360ms ease-in-out;&nbsp; box-shadow: 2px 4px 12px #bfbfbf;}#smallScreenMenu.closed {&nbsp; &nbsp;max-height: 0;}#smallScreenMenu ul {&nbsp; list-style-type: none;&nbsp; margin: 0.5em 1em;&nbsp; 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">&nbsp; <ul>&nbsp; &nbsp; <li><a href='#'>Products</a></li>&nbsp; &nbsp; <li><a href='#'>About</a></li>&nbsp; &nbsp; <li><a href='#'>Another</a></li>&nbsp; &nbsp; <li><a href='#'>Another</a></li>&nbsp; &nbsp; <li><a href='#'>Another</a></li>&nbsp; </ul></div>