Question

我在一页中有2个href链接，然后单击打开href。但是，当我单击另一个href（而不关闭第一个）时，第一个保持打开状态。

我该如何解决？

起初，我尝试仅使用CSS打开和关闭下拉菜单，但是由于有两个按钮，所以确实很混乱。现在，当我单击按钮区域的外部或再次单击按钮本身时，可以打开和关闭两个按钮。但是单击其他按钮时它不会关闭。

我想这不是一件很难解决的事情，但我似乎无法弄清楚。

非常感谢！

dashboard_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 %}

dashboard_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

只需在单击打开功能中的任意位置，然后在打开所需的下拉菜单时，放置用于关闭下拉菜单的代码即可

Answer 2

在按钮区域之外单击时，如果按钮被关闭。那么您应该将两个链接都保留在不同的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>
</div>
<div class="buttons">..... </div>

单击另一个下拉菜单时如何关闭一个下拉菜单

2 个答案: