如何在下拉菜单中创建下拉菜单

Question

我正试图为我的一个朋友构建一个事件页面。我有一个初始的下拉菜单，但我想知道当点击"信息"链接时，我怎么能有第二个下拉菜单？

我尝试复制与第一个相同的代码/结构，但由于某种原因，它对我来说不起作用。

在这里是用于查看的网站链接。

我希望它能模仿这张图片中的结构。

我还将删除下面的代码。非常感谢您的帮助！谢谢！

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").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');
}
}
}
}

.dropbtn {
font-family: 'AGENTUR';
text-transform: uppercase;
background-color: #cd9d2b;
color: #f6eee1;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 60px;
padding-right: 60px;
font-size: 40px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #cd9d2b;
}
.dropdown {
position: relative;
top: 50px;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
margin-top: 40px;
background-color: #cd9d2b;
min-width: 1150px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: #cd9d2b;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #cd9d2b;
}
#events-container {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #f6eee1;
}
#events-text {
color: #f6eee1;
font-size: 25px;
padding-left: 40px;
}
#events-info {
border-left: 1px solid #f6eee1;
padding-left: 60px;
padding-right: 60px;
}
#events-info-text {
color: #f6eee1;
font-size: 25px;
position: relative;
bottom: 5px;
border-bottom: 1px solid #f6eee1;
padding-left: 10px;
padding-right: 10px;
}
.show {
display: block;
}

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">November</button>
<div id="myDropdown" class="dropdown-content">
<div id="events-container">
<a href="#events">
<p id="events-text">
Well-Read Black Girl Festival Nov 6-8, 2020
</p>
</a>
<div id="events-info">
<a href="#events-info">
<p id="events-info-text">
info
</p>
</a>
</div>
</div>

</div>
</div>

Answer 1

下面的代码中有一个非常简单的更改，允许单击"；信息"；下拉列表中的链接。这不是一个理想的解决方案，但它表明你需要克服我在上面评论中所写的问题。

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn') && !event.target.matches('#events-info-text')) {
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');
}
}
}
}
document.querySelector("#events-info-text").addEventListener("click", () => {
let visibility = document.querySelector("#moreinfo").style.visibility;
document.querySelector("#moreinfo").style.visibility = visibility == "hidden" ? "visible" : "hidden";
});

.dropbtn {
font-family: 'AGENTUR';
text-transform: uppercase;
background-color: #cd9d2b;
color: #f6eee1;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 60px;
padding-right: 60px;
font-size: 40px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #cd9d2b;
}
.dropdown {
position: relative;
top: 50px;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
margin-top: 40px;
background-color: #cd9d2b;
min-width: 1150px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: #cd9d2b;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #cd9d2b;
}
#events-container {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #f6eee1;
}
#events-text {
color: #f6eee1;
font-size: 25px;
padding-left: 40px;
}
#events-info {
border-left: 1px solid #f6eee1;
padding-left: 60px;
padding-right: 60px;
}
#events-info-text {
color: #f6eee1;
font-size: 25px;
position: relative;
bottom: 5px;
border-bottom: 1px solid #f6eee1;
padding-left: 10px;
padding-right: 10px;
}
.show {
display: block;
}

<div id="dropdown_wrapper" class="dropdown">
<button onclick="myFunction()" class="dropbtn" id="show_november">November</button>
<div id="myDropdown" class="dropdown-content">
<div id="events-container">
<a href="#events">
<p id="events-text">
Well-Read Black Girl Festival Nov 6-8, 2020
</p>
</a>
<div id="events-info">
<a href="#events-info">
<p id="events-info-text">
info
</p>
<div id="moreinfo" style="visibility:hidden;color:black">Look here, it's more info!</div>
</a>
</div>
</div>

</div>
</div>