Question

我正在创建一个电影网站作为分配，首页是“电影卡”的图库，其中包含电影海报的缩略图以及有关预告片，流派，电影，评分和购买按钮的信息。

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

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

在本课程中，我仅学习CSS和HTML。但是，W3Schools代码包含Java语言，我一点都不了解。我认为问题在于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>

JavaScript代码

 /* 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');
        }
      }
  }
}

CSS代码

/* 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;
 }

Answer 1

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

因此，当您单击流派时，其功能会将隐藏的类分配给about，反之亦然。

我希望这会有所帮助。

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

1 个答案: