js之展開收縮菜單，用到window.onload ,onclick,

-Advertisement-

目標效果：點擊標簽1，如果列表標簽的style的display是block,改成none，否則改成block，來達到展開收縮菜單效果一.準備階段 html文件運行後頁面效果二.：點擊標簽1隱藏列表方法1 html代碼效果從上圖到下圖方法2 方法3 方法4 在方法4基礎上加上if判斷就可以 ...

目標效果：點擊標簽1，如果列表標簽的style的display是block,改成none，否則改成block，來達到展開收縮菜單效果

一.準備階段

html文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="box">
 9         <p id="btn">標簽1</p>
10         <ul id="ull" style="display: block;">
11             <li><a href="#">手寫</a></li>
12             <li><a href="#">拼音</a></li>
13         </ul>
14     </div>
15 </body>
16 </html>

運行後頁面效果

二.：點擊標簽1隱藏列表

方法1

html代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="box">
 9         <p id="btn" onclick="document.getElementById('ull').style.display='none'">標簽1</p>
10         <ul id="ull" style="display: block;">
11             <li><a href="#">手寫</a></li>
12             <li><a href="#">拼音</a></li>
13         </ul>
14     </div>
15 </body>
16 </html>

效果從上圖到下圖

方法2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function tonone() {
            document.getElementById('ull').style.display='none';
        }
    </script>
</head>
<body>
    <div id="box">
        <p id="btn" onclick="tonone()">標簽1</p>
        <ul id="ull" style="display: block;">
            <li><a href="#">手寫</a></li>
            <li><a href="#">拼音</a></li>
        </ul>
    </div>
</body>
</html>

方法3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function ()
        {
            document.getElementById('btn').onclick=function ()
            {
                document.getElementById('ull').style.display='none';
            }
        }
    </script>
</head>
<body>
    <div id="box">
        <p id="btn" >標簽1</p>
        <ul id="ull" style="display: block;">
            <li><a href="#">手寫</a></li>
            <li><a href="#">拼音</a></li>
        </ul>
    </div>
</body>
</html>

方法4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function ()
        {
            var obtn = document.getElementById('btn');
            var oull = document.getElementById('ull');
            obtn.onclick=function ()
            {
                oull.style.display='none';
            }
        }
    </script>
</head>
<body>
    <div id="box">
        <p id="btn" >標簽1</p>
        <ul id="ull" style="display: block;">
            <li><a href="#">手寫</a></li>
            <li><a href="#">拼音</a></li>
        </ul>
    </div>
</body>
</html>

在方法4基礎上加上if判斷就可以實現頁面展開收縮菜單功能

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function ()
        {
            var obtn = document.getElementById('btn');
            var oull = document.getElementById('ull');
            obtn.onclick=function ()
            {
                if(oull.style.display=='none')
                {
                   oull.style.display='block'
                }
                else
                {
                    oull.style.display='none'
                }
            }
        }
    </script>
</head>
<body>
    <div id="box">
        <p id="btn" >標簽1</p>
        <ul id="ull" style="display: block;">
            <li><a href="#">手寫</a></li>
            <li><a href="#">拼音</a></li>
        </ul>
    </div>
</body>
</html>

效果如下

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

CSS3背景色透明(相容IE8)

標準瀏覽器通過rgba()實現背景色透明;IE8以下瀏覽器通過特有濾鏡實現背景色透明。代碼如下: 上述代碼中: ...
js之選項卡（tag標簽）

目標效果：點擊不同按鈕顯示不同內容代碼如下 ...
js之全選即點擊全選標簽可選擇全部覆選框

目標效果：網頁全選功能，即點擊全選標簽可選擇全部覆選框實現代碼如下 ...
關於contenteditable屬性

今天刷刷看看，看到了發說說框，發現居然不是textarea的，百思不得其解圍。後來看到contenteditable，心想應該就是這個搞怪的吧，百度了下。w3c的解釋是contenteditable屬性規定元素內容是否可編輯。裡面只有true或者false;預設false，加個true後，div、p ...
vue中$route 和$router的區別

在vue中會出現一種情況 const url=this.$route.query.returnURL; this.$router.push(url); $router和$route的區別傻傻的分不清 1.先說$router這個就是router的實例，在創建vueRouter實例 const rou ...
react 中的blur事件

我們知道，想要手動觸發blur事件時候，可以使用：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur 然而在react中，當你想手動觸發一個input的blur事件時，你會得到一個錯誤：blur is not a fun ...
根據location地址，在導航欄高亮顯示當前頁面

獲取當前頁面的地址欄。與導航欄中所有<a> 標簽的href屬性進行比較。如果相等則高亮顯示此<a>標簽。註意點：a 標簽的href 屬性在瀏覽器解析時是絕對路徑。 a 標簽的href 如果是錨點，則 pathname ， href都與 location的 pathname ，href相等，但 ...
載入更多功能的實現

發送ajax請求，獲取數據。判斷code狀態。通過模板引擎渲染的頁面。根據服務端數據的總條數判斷是否顯示載入更多按鈕。代碼 ...