實(shí)現(xiàn)原理displayblock 把代碼直接復(fù)制看效果 lt！DOCTYPE html lthtml lang=quotenquot lthead ltmeta charset=quotUTF8quot ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=10quot ltmeta。

1首先，打開html編輯器，新建html文件，例如indexhtml，輸入問題基礎(chǔ)代碼2在indexhtml中的ltbody標(biāo)簽中，輸入js代碼function fun alert#39click success！#39 3瀏覽器運(yùn)行indexhtml頁面，此時點(diǎn)擊按鈕。

下面是一段演示代碼lt！doctype htmllthtmlltheadltmeta charset=quotutf8quotlttitle彈出層到瀏覽器中央背景變暗lttitleltstyle*margin0padding0pxbodypadding30px#showwidth300pxheight200px。

這個是html和JavaScript的基礎(chǔ)，其中按鈕是寫在html中，彈出事件寫在JavaScript中具體代碼如下 JavaScript function tan alertquotHELLOquot html ltinput type=button value=按鈕 onclick=tan。

通過ID來獲取菜單主體 btnaddEventListenerquotclickquot， menuClick綁定事件點(diǎn)擊的時候觸發(fā)函數(shù) function menuClick 思路當(dāng)現(xiàn)在菜單是關(guān)閉的時候點(diǎn)擊按鈕菜單CSS動畫顯示，然后添加class “open”。