js （單個的）點擊式下拉菜單

-Advertisement-

單個的點擊展示下拉菜單比較簡單。比如點擊右上角的設置按鈕會彈出修改密碼和退出功能等。多個的點擊式展示下拉菜單，在之前有發過。 ...

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container {
            overflow: hidden;
            background-color: #333;
            font-family: Arial;
        }

        .container a {
            float: left;
            font-size: 16px;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .dropdown {
            float: left;
            overflow: hidden;
        }

        .dropdown .dropbtn {
            cursor: pointer;
            font-size: 16px;
            border: none;
            outline: none;
            color: white;
            padding: 14px 16px;
            background-color: inherit;
        }

        .container a:hover, .dropdown:hover .dropbtn {
            background-color: red;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content a {
            float: none;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

        .dropdown-content a:hover {
            background-color: #ddd;
        }

        .show {
            display: block;
        }
    </style>
</head>
<body>
<div class="container">
    <a href="#home">主頁</a>
    <a href="#news">新聞</a>
    <div class="dropdown">
        <button class="dropbtn" onclick="myFunction()">下拉菜單</button>
        <div class="dropdown-content" id="myDropdown">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
</div>

<h3>導航欄中的下拉菜單</h3>
<p>點擊按鈕顯示下拉菜單</p>
</body>
</html>
<script>
    /* 點擊按鈕，下拉菜單在 顯示/隱藏 之間切換 */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    // 點擊下拉菜單意外區域隱藏
    window.onclick = function(e) {
        if (!e.target.matches('.dropbtn')) {
            var myDropdown = document.getElementById("myDropdown");
            if (myDropdown.classList.contains('show')) {
                myDropdown.classList.remove('show');
            }
        }
    }
</script>

單個的點擊展示下拉菜單比較簡單。比如點擊右上角的設置按鈕會彈出修改密碼和退出功能等。

多個的點擊式展示下拉菜單，在之前有發過。

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

-Advertisement-

更多相關文章

插件封裝入門一

編寫一個jQuery插件開始於給jQuery.fn加入新的功能屬性，此處添加的對象屬性的名稱就是你插件的名稱：為什麼不用$符號呢？為了避免和其他JavaScript庫衝突，我們最好將jQuery傳遞給一個自我執行的封閉程式，jQuery在此程式中映射為符號，這樣可以避免$號被其他庫覆寫。在這個封 ...
前端錯誤監控

為什麼要做前端錯誤監控? 1. 為了保證產品的質量 2. 有些問題只存在於線上特定的環境 3. 後端錯誤有監控,前端錯誤沒有監控前端錯誤的分類前端錯誤分為兩類: 即時運行錯誤和資源載入錯誤即使運行錯誤的捕獲方式即時運行錯誤的捕獲方式分為兩類 try...catch 通過try...catch ...
如何disabled禁用所有表單input輸入框元素

轉載地址：https://www.zhangxinxu.com/wordpress/?p=8568 一、pointer-events:none和覆蓋層方法的問題經常會遇到需求，需要禁用div中或者form元素中一堆表單控制項元素，如<input>，<select>，<textarea>元素。很多人 ...
由“RangeError: Invalid status code: 0”錯誤所引發的思考

最近發現一個基於Node.js平臺上的Express框架運行的Web網站經常報這樣一個錯誤：網站的源碼中有專門針對錯誤處理的中間件，經過精簡之後的代碼如下：乍一看，這裡的status code不太可能為0，因為無論err.code的值為字元串0還是數字0，最終都會被賦值為500。除非err.co ...
jquery 常用選擇器基礎語法學習

jquery常用的選擇器方法，子代與後代、直接父代與祖代、同胞元素、過濾器 ...
ES6 解構

第五章解構：使數據訪問更便捷對象解構 let node = { type: 'id', name: 'foo', }; let {type, name} = node; // type === 'id', name === 'foo' let {type: TYPE, name: NAME} = ...
作用域、變數提升、閉包

你不知道的js——作用域 1 作用域 1.1編譯原理在傳統編譯語言的流程中，程式中的一段源代碼在執行之前會經歷三個步驟，統稱為“編譯” 1分詞/詞法分析（Tokenizing/Lexing）會將由字元組成的字元串分解成（對編程語言來說）有意義的代碼塊，這些代碼塊被稱為詞法單元（token） ...
js獲取客戶端IP

獲取客戶端公網IP 獲取客戶端內網IP(IE不支持) 原文鏈接：https://ourcodeworld.com/articles/read/257/how-to-get-the-client-ip-address-with-javascript-only ...