如果用戶在下拉菜單之外單擊，如何關閉下拉菜單？

Question

當我們點擊圖片時，我正在制作用戶下拉菜單，我們會得到一個下拉菜單或一張卡片。 當用戶在下拉菜單之外單擊時，我想關閉它。 關閉代碼將使用 JavaScript。 請解決這個問題。 我認為 JavaScript 中會有一個刪除功能，它會在點擊下拉菜單后刪除它。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Simple popup menu</title>

<style>
    body {
        margin: 0;
        background: tomato;
        font-family: 'Open Sans', sans-serif;
    }

    .menubtn {
        cursor: pointer;
        width: 40px;
        height: 20px;
        right: 10px;
        top: 10px;
        position: absolute;
    }

    .userimg {
        border-radius: 50%;
        height: 35px;
        width: 35px;
    }

    .navmenu {
        width: 150px;
        border-radius: 10px;
        margin-top: 30px;
        background: #fff;
        position: absolute;
        right: 18px;
        top: 25px;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
        z-index: 10;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
    }

    .navmenu.opened {
        visibility: visible;
        opacity: 1;
    }

    .navmenu::before {
        content: '';
        position: absolute;
        top: -5px;
        right: 7px;
        width: 15px;
        height: 15px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .navmenu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .navmenu ul.text-list {
        text-align: left;
        font-weight: 100;
        width: 100%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navmenu ul.text-list li a {
        text-decoration: none;
        padding-left: 20px;
        padding-top: 5px;
        color: #343434;
        font-weight: 600;
        display: block;
        line-height: 27px;
        -webkit-transition: all 200ms ease;
        transition: all 200ms ease;
    }

    .navmenu ul.text-list li a:hover {
        color: tomato;
    }
</style>
</head>

<body>
<div class="menubtn">
    <span>
        <img class="userimg" src="http://tryma.in/images/user/default.png"/>
    </span>
</div>
<div class="navmenu">
    <ul class="text-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $('.menubtn').on('click', function() {
        $('.navmenu').toggleClass('opened');
    });
</script>
</body>

</html>

請幫助我解決此代碼。 謝謝你

Answer 1

綁定單擊文檔並在單擊文檔時刪除opened類。
使用e.stopPropagation()以便事件不會在單擊.menubtn調用哪個事件的document上傳播

 $('.menubtn').on('click', function(e) { e.stopPropagation(); $('.navmenu').toggleClass('opened'); }); $(document).on('click', function() { $('.navmenu').removeClass('opened'); });

 body { margin: 0; background: tomato; font-family: 'Open Sans', sans-serif; } .menubtn { cursor: pointer; width: 40px; height: 20px; right: 10px; top: 10px; position: absolute; } .userimg { border-radius: 50%; height: 35px; width: 35px; } .navmenu { width: 150px; border-radius: 10px; margin-top: 30px; background: #fff; position: absolute; right: 18px; top: 25px; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15); z-index: 10; visibility: hidden; opacity: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .navmenu.opened { visibility: visible; opacity: 1; } .navmenu::before { content: ''; position: absolute; top: -5px; right: 7px; width: 15px; height: 15px; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .navmenu ul { list-style: none; margin: 0; padding: 0; } .navmenu ul.text-list { text-align: left; font-weight: 100; width: 100%; margin: auto; padding-top: 10px; padding-bottom: 10px; } .navmenu ul.text-list li a { text-decoration: none; padding-left: 20px; padding-top: 5px; color: #343434; font-weight: 600; display: block; line-height: 27px; -webkit-transition: all 200ms ease; transition: all 200ms ease; } .navmenu ul.text-list li a:hover { color: tomato; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menubtn"> <span> <img class="userimg" src="http://tryma.in/images/user/default.png"/> </span> </div> <div class="navmenu"> <ul class="text-list"> <li><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div>

如果用戶在下拉菜單之外單擊，如何關閉下拉菜單？

問題描述

1 個解決方案

解決方案1
1 已采納 2018-10-21 11:38:33

如果用戶在下拉菜單之外單擊，如何關閉下拉菜單？

問題描述

1 個解決方案

解決方案1 1 已采納 2018-10-21 11:38:33

解決方案1
1 已采納 2018-10-21 11:38:33