第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

我如何使用純 JS 使下拉菜單順利顯示?

我如何使用純 JS 使下拉菜單順利顯示?

開心每一天1111 2022-12-29 13:50:12
我做了一個(gè)下拉菜單,display: none;當(dāng)它被點(diǎn)擊時(shí),下拉部分有JS給它的類motherHover,display: grid;讓它可見。但問(wèn)題是菜單出現(xiàn)了One-shot。純JS如何讓下拉菜單流暢顯示?function fgf(){    var hoverElement = document.querySelector(".father"),    tragtedElement = document.querySelector("#dds");    tragtedElement.classList.toggle("motherHover");}ul{    list-style: none;}.father{}.mother{    display: none;}.asd {    display: grid;}.motherHover{    display: grid;}<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet"/>    <ul>        <li class="father" onclick="fgf()">            <button>                Drop Menu            </button>        </li>        <li id="dds" class="mother" >            <ul class="asd">                <i>g</i>                <i>g</i>                <i>g</i>                <i>g</i>                <i>g</i>            </ul>        </li>    </ul>
查看完整描述

1 回答

?
米琪卡哇伊

TA貢獻(xiàn)1998條經(jīng)驗(yàn) 獲得超6個(gè)贊

它通常完成max-height和過(guò)渡。


function fgf(){

    let asd = document.querySelector(".asd");

    asd.classList.toggle("open");

}

ul{

    list-style: none;

}

.asd {

    display: grid;

    max-height: 0;

    transition: max-height 500ms;

    overflow: hidden;

    background: green;

    color: white;

}

.open {

   max-height: 100px !important;

}

<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet"/>


    <ul>

        <li class="father" onclick="fgf()">

            <button>

                Drop Menu

            </button>

        </li>

        <li id="dds" class="mother" >

            <ul class="asd">

                <i>g</i>

                <i>g</i>

                <i>g</i>

                <i>g</i>

                <i>g</i>

            </ul>

        </li>

    </ul>


查看完整回答
反對(duì) 回復(fù) 2022-12-29
  • 1 回答
  • 0 關(guān)注
  • 106 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)