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

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

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

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

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