單擊不同 div 的子元素時顯示/隱藏某個 div [已解決]

Question

我希望每次單擊dropbtn時都顯示dropdown-content 。 我當前代碼的問題是，它僅在我僅單擊dropbtn div 中的空格時才有效，但如果我單擊其中的元素或子元素，則它不起作用並且dropdown-content仍顯示為 none .

我嘗試選擇我的droptbtn div 中的所有元素並使用相同的條件來隱藏/顯示dropdown-content ，但這也不起作用。

我的最終目標是在單擊dropbtn div 時隱藏/顯示dropdown-content ，無論用戶是否單擊了其子元素。

HTML 代碼：

<div class="dropdown">
    <div class="dropbtn" id="dropbtn">
        <img src="{{ user.profilePic.url }}" alt="">
        <small><b>{{ user.username }}</b></small>
        <i class="fa fa-angle-down" style="font-size:24px"></i>
    </div>
    <div class="dropdown-content" id="dropdown-content">
        <a href="{%url 'profile'%}"><i class="fa fa-user"></i>Profile</a>
        <a href="{%url 'logout'%}"><i class="fa fa-sign-out"></i>Logout</a>
    </div>
</div>

Javascript 代碼：

let dropbtn = document.getElementById('dropbtn');
let dropbtn_elem = dropbtn.getElementsByTagName('img, small, i')
let dropdown = document.getElementById('dropdown-content');

document.addEventListener('click', function(e) {
    if (e.target !== dropbtn && dropdown.style.display === "block"){
        dropdown.style.display = "none";
    }
})

dropbtn.onclick = function() {
    if (dropdown.style.display === "block") {
        dropdown.style.display = "none";
    } else {
        dropdown.style.display = "block";
    }
}

dropbtn_elem.onclick = function() {
    if (dropdown.style.display === "block") {
        dropdown.style.display = "none";
    } else {
        dropdown.style.display = "block";
    }
}

Answer 1

正如@kunal-tanwar 建議使用

#dropbtn *
{
  pointer-events: none;
}

有時此方法不起作用，當您需要注冊子項點擊時，在這種情況下使用element.closest()檢查element或其祖先是否與選擇器匹配：

 let dropbtn = document.getElementById('dropbtn'); let dropbtn_elem = dropbtn.getElementsByTagName('img, small, i') let dropdown = document.getElementById('dropdown-content'); document.addEventListener('click', function(e) { if (e.target.closest("#dropbtn") || dropdown.style.display;= "block") return. dropdown.style;display = "none". }) dropbtn.onclick = function() { if (dropdown.style.display === "block") { dropdown.style;display = "none". } else { dropdown.style;display = "block". } } dropbtn_elem.onclick = function() { if (dropdown.style.display === "block") { dropdown.style;display = "none". } else { dropdown.style;display = "block" } }

 <div class="dropdown"> <div class="dropbtn" id="dropbtn"> <img src="{{ user.profilePic.url }}" alt=""> <small><b>{{ user.username }}</b></small> <i class="fa fa-angle-down" style="font-size:24px"></i> </div> <div class="dropdown-content" id="dropdown-content"> <a href="{%url 'profile'%}"><i class="fa fa-user"></i>Profile</a> <a href="{%url 'logout'%}"><i class="fa fa-sign-out"></i>Logout</a> </div> </div>