原生JS實現點擊一個按鈕顯示一個div，再點擊按鈕div隱藏，或點擊除div外其它空白處div隱藏

本文轉載自查看原文 2018-11-15 18:28 6561 js雜項練習

<!DOCTYPE html>
<html style="font-size: 24px">
<head>
    <title>js點擊按鈕顯示再點擊空白地方隱藏</title>
    <style type="text/css">
        #div {
            border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
            font-size: 2rem
        }
    </style>
</head>
<body>
    <div id="div">這是div的內容</div>
    <button onclick="show()">點擊我</button>
<script type="text/javascript">
    function show (event) {
        //取消冒泡
        let oevent = event || window.event
        if (document.all) {
            oevent.cancelBubble = true
        } else {
            oevent.stopPropagation()
        }
        if (document.getElementById('div').style.display === 'none' || document.getElementById('div').style.display === '') {
            document.getElementById('div').style.display = 'block'
        } else {
            document.getElementById('div').style.display = 'none'
        }
    }
    document.onclick = function () {
        document.getElementById('div').style.display = 'none'
    }
    document.getElementById('div').onclick = function (event) {
        let oevent = event || window.event
        oevent.stopPropagation()
    }
    
</script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 點擊空白處隱藏div jquery怎么實現點擊一個按鈕控制一個div的顯示和隱藏點擊按鈕隱藏和顯示div React 點擊按鈕顯示div與隱藏div React 點擊按鈕顯示div與隱藏div，並給div傳children js或jquery實現點擊某個按鈕或元素顯示div,點擊頁面其他任何地方隱藏div jquery點擊按鈕顯示和隱藏DIv 兩個單選按鈕(一個是，一個否 ),一個div層,實現點擊隱藏,顯示div 15點擊按鈕，設置div顯示和隱藏div js實現點擊空白處div消失