Question

我正在尝试为我的一个朋友建立一个活动页面。我有初始的下拉菜单，但我想知道单击“信息”链接后如何进行第二个下拉菜单？

我尝试复制与第一个相同的代码/结构，但是由于某种原因，它无法正常工作。

Here 是要查看的网站链接。

我希望它能模仿this图像中的结构。

我还将在下面放置代码。任何帮助将不胜感激！谢谢！

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

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

1 个答案: