如何制作一个函数来显示/隐藏 div 元素，同时定位多个元素

Question

我是初学者，我正在复制LinkedIn的布局设计作为练习项目。我需要一个在单击按钮时显示或隐藏菜单的功能。 我最初通过复制 W3SCHOOL 上的示例来做到这一点，但后来我尝试将相同的逻辑应用于不同的按钮和 div ，但它不起作用。我尝试稍微重写它以处理多个变量，但我自己做不到

这是代码：

<button class="navbarBTN"onclick="hideshow()">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" class="mercado-match" width="24" height="24" focusable="false">
            <path d="M3 3h4v4H3zm7 4h4V3h-4zm7-4v4h4V3zM3 14h4v-4H3zm7 0h4v-4h-4zm7 0h4v-4h-4zM3 21h4v-4H3zm7 0h4v-4h-4zm7 0h4v-4h-4z"></path>
          </svg></button>
          <div class="myDIV" class="flex-column bg-light rounded-3" style="position: absolute;  width: 180px; font-size: smaller; margin-top: 2.5%;">
            <div class="d-flex flex-column">
              <ul style="margin: 0; padding: 6px; border-color:#666666; border-bottom: 2px solid;">
                <p class="m-0">Costin Velicu</p>
                <p class="fw-light">Looking for work</p>
                <button type="button" class="btn btn-outline-primary rounded-5" style="width: 100%; height: 30px;"><p style="font-size: smaller;">View profile</p></button>
              </ul>
</div>   

<script>
function hideshow() {
  var x = document.getElementsByClassName("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

这个有效 本质上，在我按下按钮后，div 会将显示模式从块切换到无。

<button class="navbarBTN"onclick="hideshow()">
          <div class="d-flex sticky-bottom bg-light" style="width: fit-content; left: 80%; position: relative;">
            <i class="fa-solid fa-user-ninja" style="color: #424242; font-size: larger; margin-right: 0.5em; padding: 2px"></i>
          <p style="margin-right: 10em;">Messaging</p>
          <div class="justify-content-between"><i class="fa-solid fa-ellipsis" style="color: #424242; margin-right: 0.5em;"></i><i class="fa-solid fa-pen-to-square" style="color: #424242; margin-right: 0.5em;"></i><i class="fa-solid fa-angle-up" style="color: #424242; margin-right: 
          0.5em;"></i></div></div></button>
        <div class="myDIV" style="display: flex; flex-direction: column-reverse; position: relative; left: 80%;">
         <div class="container d-flex flex-column bg-light-subtle" style="width: 350px; position: absolute;">
          <form class="d-flex">
            <input class="form-control me-1" type="search" placeholder="Search..." aria-label="Search">
            </form>
<script>
function hideshow() {
  var x = document.getElementsByClassName("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
        
     

这个不行。

Answer 1

您需要迭代

getElementsByClassName()

返回的集合：

HTML：

<button onclick="showHide()">Show/Hide</button>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>

JavaScript：

function showHide() {
    // Get a collection of elements with the class "show-hide"
    const elements = document.getElementsByClassName("show-hide");

    // Iterate over the collection
    for (let i = 0; i < elements.length; i++) {
        // Set the current element
        const current_element = elements[i];
        // Check current display of the current element
        if (current_element.style.display === "none") {
            // If the current element is hidden, display it
            current_element.style.display = "block";
        } else {
            // If the current element is shown, hide it
            current_element.style.display = "none";
        }
    }
}

或者，如果您可以或正在使用 JQuery，则更容易做到：

HTML：

<button class="btn-main" type="button" id="toggle-elements">Show/Hide</button>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>

JavaScript 和 JQuery：

// When the hide/show button is clicked
$("#toggle-elements").on("click", () => {
    $(".show-hide").toggle();
});