所以，這是我的代碼，點擊 $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()，但沒有取得任何成功。也預先感謝您的幫助
1 回答
ibeautiful
TA貢獻1993條經驗 獲得超6個贊
切換菜單的類，而不是直接操作樣式。然后使用 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>
- 1 回答
- 0 關注
- 206 瀏覽
添加回答
舉報
0/150
提交
取消