單擊另一個下拉菜單時如何關閉一個下拉菜單

Question

我在一頁中有 2 個 href 鏈接，單擊時會打開 href。 但是當我點擊另一個href（不關閉第一個）時，第一個保持打開狀態。

我該如何解決這個問題？

起初我嘗試只使用 CSS 打開和關閉下拉菜單，但由於兩個按鈕，這變得非常混亂。 現在，當我再次單擊按鈕區域的外部或按鈕本身時，我可以打開這兩個按鈕並關閉它們。 但是單擊另一個按鈕時它不會關閉。

我想這不是一件很難解決的事情，但我似乎無法弄清楚。

非常感謝！

儀表板_home.html

% extends 'dashboard.html' %}

{% block content %}
{% block static %}
{% load static %}
<link rel="stylesheet" href="{% static 'dashboard_home.css' %}">
{% endblock static %}

<div class="welcome-message">
    <p>Hello, {{ request.user.first_name }} </p> 
    <img src="{% static 'Logo/Logo_DarkGreen.png' %}" class=header-logo>

</div>    

<div class="buttons">
    <a href='#' onclick="myFunction()" class='basic-button'><h2>happy</h2><br><h3>head</h3></a>
    <div class="dropdown-modules" id="dropdown-modules">
        <a href="#">Module 1</a>
        <a href="#">Module 2</a>
        <a href="#">Module 3</a>
        <a href="#">Module 4</a>
        <a href="#">Module 5</a>
    </div>
        
    <a href='#' onclick="myFunction1()" class='basic-button'><h4>healthy</h4><br><h3>heart</h3></a>
    <div class="dropdown-modules" id="dropdown-modules1">
        <a href="#">Module 6</a>
        <a href="#">Module 7</a>
        <a href="#">Module 8</a>
        <a href="#">Module 9</a>
        <a href="#">Module 10</a>
    </div>
</div>    

<br>
<br>

<script>
function myFunction() {
  document.getElementById("dropdown-modules").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.basic-button')) {
    var dropdowns = document.getElementsByClassName("dropdown-modules");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function myFunction1() {
  document.getElementById("dropdown-modules1").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.basic-button')) {
    var dropdowns = document.getElementsByClassName("dropdown-modules1");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script> 

{% endblock content %}

儀表板_home.css

body{
    background-color: #ececec;
}

.welcome-message{
    font-size: 25px;
    color: #ffffff;
    background-color: #608f7d;
    padding: 14px 14px 14px 20px;
    box-shadow: 0px 2.5px 1.5px #27272780;
    position: relative;
    display: flex;
}

.header-logo{
    width: 20%;
    position: absolute;
    right: 10px;
}

.buttons{
    padding: 60px 10px 20px 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly; 
}

.basic-button{
    height: 130px;
    width: 130px;
    border-radius: 50%;
    text-decoration: none;
    text-transform: lowercase;
    font-weight: 500;
    color: #608f7d;
    font-size: 22px;
    box-shadow: -10px -10px 15px rgba(255,255,255,0.5), 10px 10px 15px rgba(70,70,70,0.12);
    border: 2px solid #ececec;
    outline: none;   
    text-align: center; 
    cursor: pointer;
    position: relative;
}


.basic-button:hover{
    box-shadow: -10px -10px 15px rgba(255,255,255,0.5), 
                10px 10px 15px rgba(70,70,70,0.12),
                inset -10px -10px 15px rgba(255,255,255,0.5), 
                inset 10px 10px 15px rgba(70,70,70,0.12);
    color: #f28500;            
}

.basic-button h2{
    font-size: 20px;
    line-height: 2px;
    margin-block-end: 0em;
    margin-block-start: 2.5em;
    font-weight: 600;
}

.basic-button h4{
    font-size: 18.5px;
    line-height: 2px;
    margin-block-end: 0em;
    margin-block-start: 2.7em;
    font-weight: 600;
}

.basic-button h3{
    font-size: 25px;
    line-height: 2px;
    margin-block-end: 0em;
    margin-block-start: -0.4em;
    font-weight: 500;
}

.dropdown-modules{
    display: none;
    overflow: hidden;
    position: absolute;
    padding: 20px;
}

.show {display: block;}


.dropdown-modules a{
    width: 300px;
    margin-top: 30px;
    font-size: 18px;
    text-decoration: none;
    color: #608f7d;
    display: flex;
    box-shadow: -10px -10px 15px rgba(255,255,255,0.5), 10px 10px 15px rgba(70,70,70,0.12);
    border: 2px solid #ececec;
    border-radius: 25px;
    padding-left: 20px;
    font-weight: 500;
}

.dropdown-modules {
    margin-top: 130px;

}

Answer 1

當您單擊打開的 function 中的任意位置時，只需輸入用於關閉下拉列表的代碼，然后打開所需的下拉列表

Answer 2

當您單擊按鈕區域外部時，如果它關閉。 那么您應該將兩個鏈接保留在不同的 div 中，並根據需要調整按鈕 class 的樣式。

<div class="buttons">
    <a href='#' onclick="myFunction()" class='basic-button'><h2>happy</h2><br><h3>head</h3></a>
    <div class="dropdown-modules" id="dropdown-modules">
        <a href="#">Module 1</a>
        <a href="#">Module 2</a>
        <a href="#">Module 3</a>
        <a href="#">Module 4</a>
        <a href="#">Module 5</a>
    </div>
</div>
<div class="buttons">..... </div>