Javascript 如何一次只打开一个下拉内容框？

我正在创建一个电影网站，作为一项任务，首页是一个“电影卡”图库，其中包含一张电影海报图钉，以及有关预告片、电影类型、电影、评级和购买按钮的信息

我使用W3Schools改编的代码将“流派”和“关于”变成了下拉按钮，即当你点击“流派”或“关于”时，会出现一个包含文本内容的框

当您在“流派”和“关于”按钮外单击时，该框消失。但是，如果同时单击“流派”和“关于”，则会保留两个框并彼此重叠。如何只显示一个框

在本课程中，我只学习了CSS和HTML。然而，W3Schools代码包含Javascript，我对此一无所知。我认为问题在于Javascript代码，但我不知道如何修改它。如果能得到你的帮助，那就太棒了

HTML代码

<!-- Genre -->
<div class="dropdown">
<button onclick="myFunction(this)" class="dropbtn">GENRE &nbsp; 
 &#9662;</button>

<div id="myDropdown1" class="dropdown-content">
Drama
</div>
</div>

<!-- About -->
<div class="dropdown">
<button onclick="myFunction(this)" class="dropbtn">ABOUT &nbsp; 
&#9662;</button>

 <div id="myDropdown2" class="dropdown-content">
 <h1>Duration</h1>
 <p>2h 2 mins</p>
 <h1>Synopsis</h1>
 <p>Wild Tales (Spanish: Relatos salvajes) is a 2014 Argentine- 
 Spanish black comedy anthology film composed of six standalone 
 shorts, all written and directed by Damián Szifron, united by a 
 common theme of violence and vengeance.

 <br><br>
 The film is composed of six short segments: "Pasternak", "Las 
 ratas" ("The Rats"), "El más fuerte" ("The Strongest"), "Bombita" 
 ("Little Bomb"), "La propuesta" ("The Proposal"), and "Hasta que la 
  muerte nos separe" ("Till Death Do Us Part"). 
  </p>
 </div>
 </div>

---

在每个函数上，尝试为另一个下拉菜单获取一个现有类，然后创建一个隐藏此功能的类

因此，当您单击“流派”时，它的功能会将隐藏的类指定给about，反之亦然

---

我希望这会有所帮助。

当用户单击下拉列表时，首先检查并从所有下拉列表中删除

。show

 /* When the user clicks on the button, 
                    toggle between hiding and showing the dropdown 
content */
function myFunction(a) {
    a.parentNode.getElementsByClassName("dropdown-content") . 
[0].classList.toggle("show");
 }

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

/* DROPDOWN STYLING (For "Genre" & "About") */

/* Dropdown Buttons ("Genre" & "About") */
.dropbtn {
    background-color: transparent;
    color: white;
    font-size: 12px;
    border: none;
    outline: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: transparent;
}

.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content Formatting */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    opacity: 0.8;
    color: black;
    padding: 10px;
    overflow: hidden;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
 }

.dropdown-content h1 {
    font-size: 12px;
    text-transform: italic;
    letter-spacing: 1px;
    font-weight: bold;
 }

/* Genre */
#myDropdown1 {
    width: 100px;
 }

/* About */
#myDropdown2 {
    width: 300px;
 }

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
 }

.dropdown a:hover {
    background-color: #ddd;
 }

.show {
    display: block;
 }