因此,这是我的代码,单击$ 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(),但没有获得任何成功。也预先感谢您的帮助
最佳答案
切换菜单类而不是直接操作样式。然后使用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>
关于javascript - 使用JQuery单击时,下拉菜单会下滑,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60598760/