ユーザーが外部にクリックするとドロップダウンを閉じる

Question

2つのドロップダウンボタンがあります。外/ ORをクリックすると閉じますが、別のドロップダウンボタンをクリックすると閉じず、もう一方がポップダウンします。私は他のボタンやそれ以外のものをクリックすると閉じます。

function myFunction() { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
function myFunction1() { 
 
    document.getElementById("myDropdown1").classList.toggle("show"); 
 
} 
 

 
window.onclick = function(e) { 
 
    if (!e.target.matches('.dropbtn')) { 
 

 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    for (var d = 0; d < dropdowns.length; d++) { 
 
     var openDropdown = dropdowns[d]; 
 
     if (openDropdown.classList.contains('show')) { 
 
     openDropdown.classList.remove('show'); 
 
     } 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="index.php" class="cmn-t-underline">Acasa</a></li> 
 
    <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()" style="cursor:pointer">Infinatri firme</a> 
 
     <div class="dropdown-content" id="myDropdown"> 
 
     <a href="infintare_societate_limitata.php"> Societate cu raspundere limitata (S.R.L.) </a> 
 
     </div> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn" onclick="myFunction1()" style="cursor:pointer">Modificari firma</a> 
 
     <div class="dropdown-content" id="myDropdown1"> 
 
     <a href="modificari_actualizare_date.php">Actualizare date de identificare</a> 
 
     </div> 
 
    </li>

Answer 1

あなたはmyDropdownのクリックイベントにmyDropdown1の近く、およびその逆をトリガすることができます。

Answer 2

クリックするとドロップダウンを非表示にすることができ、ドロップダウンの親に表示されるクリックによってバブルが停止することがわかります。

/* Anything that gets to the document 
/* Anything that gets to the document 
    will hide the dropdown */ 
$(document).click(function(){ 
    $("#dropdown").hide(); 
}); 

/* Clicks within the dropdown won't make 
    it past the dropdown itself */ 
$("#dropdown").click(function(e){ 
e.stopPropagation(); 
}); 

Answer 3

このようなことがあります。

function myFunction(event, dropDownName) { 
 
    //Pass in your dropdownName which is the dropdown 
 
    var dropDownHandler = document.getElementById(dropDownName); 
 

 
    dropDownHandler.classList.toggle("show"); 
 
    // Get the trigger element of the dropdown 
 
    var menuHandler = event.currentTarget; 
 

 
    if (dropDownHandler.classList.contains("show")) { 
 
    //Attach only when the dropdown is active, 
 
    //to ensure onclick isn't called always 
 
    document.addEventListener("click", function(docEvent) { 
 
     documentHandler(docEvent, menuHandler) 
 
    }); 
 
    } else { 
 
    dropDownHandler.classList.toggle("show"); 
 
    // If is closed, remove the handler 
 
    document.removeEventListener("click", documentHandler); 
 
    } 
 

 
    function documentHandler(event, menuHandler) { 
 
    if (menuHandler.contains(event.target)) { 
 
     dropDownHandler.classList.add("show"); 
 
    } else { 
 
     dropDownHandler.classList.remove("show"); 
 
    } 
 
    } 
 
}

.show { 
 
    display: block !important; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="index.php" class="cmn-t-underline">Acasa</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(event, 'myDropdown')" style="cursor:pointer">Infinatri firme</a> 
 
     <div class="dropdown-content" id="myDropdown"> 
 
     <a href="infintare_societate_limitata.php"> Societate cu raspundere limitata (S.R.L.) </a> 
 
     </div> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(event, 'myDropdown1')" style="cursor:pointer">Modificari firma</a> 
 
     <div class="dropdown-content" id="myDropdown1"> 
 
     <a href="modificari_actualizare_date.php">Actualizare date de identificare</a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</nav>