如何使用 js 在 mega navbar 中顯示 make display block 和 none

Question

  <ul class="nav_menu">
    <li class="nav_list nav_list_menu" onclick="myFunction()">
      <a href="#!" class="nav_link">
        <span>About Us</span>
        <ion-icon name="chevron-down-outline"></ion-icon>
      </a>
      <div class="dropdown">
        <div class="dropdown-inner">
          <div class="dropdown-items active">
            <div class="item-list">
              <div id="navbar-close-item" onclick="closeNavbarFunction()">
                <ion-icon name="close-circle-outline"></ion-icon>
              </div>
              <div class="sub-navbar-items">
                <h4>About Us</h4>
                <div class="d-flex justify-context-between about-description">
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Iusto rerum velit praesentium, illum doloremque culpa
                    consequuntur, nobis voluptate magni nihil laudantium?
                  </p>
                  <div class="navbar-sub-links">
                    <ul>
                      <li>
                        <a href="../about.html"> Vision </a>
                      </li>
                      <li>Mission</li>
                      <li>Contact Us</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="nav-bar-inner-description-img">
                <img
                  src="../assets/about-us-header.jpg"
                  alt="about"
                  width="100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="nav_list nav_list_menu">
      <a href="#!" class="nav_link">
        <span>Purpose</span>
        <ion-icon name="chevron-down-outline"></ion-icon>
      </a>
      <div class="dropdown">
        <div class="dropdown-inner">
          <div class="dropdown-items active">
            <div class="item-list">
              <div class="sub-navbar-items">
                <h4>PURPOSE</h4>
                <div class="d-flex justify-context-between about-description">
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Iusto rerum velit praesentium, illum doloremque culpa
                    consequuntur, nobis voluptate magni nihil laudantium?
                  </p>
                  <div class="navbar-sub-links">
                    <ul>
                      <li>LINK1</li>
                      <li>LINK2</li>
                      <li>LINK3</li>
                      <li>LINK4</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="nav-bar-inner-description-img">
                <img
                  src="../assets/about-us-header.jpg"
                  alt="about"
                  width="100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="nav_list nav_list_menu">
      <a href="#!" class="nav_link">
        <span>Menu</span>
        <ion-icon name="chevron-down-outline"></ion-icon>
      </a>
      <div class="dropdown">
        <div class="dropdown-inner">
          <div class="dropdown-items active">
            <div class="item-list">
              <div class="sub-navbar-items">
                <h4>Menu</h4>
                <div class="d-flex justify-context-between about-description">
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Iusto rerum velit praesentium, illum doloremque culpa
                    consequuntur, nobis voluptate magni nihil laudantium?
                  </p>
                  <div class="navbar-sub-links">
                    <ul>
                      <li>COOKIES</li>
                      <li>BROWNIES</li>
                      <li>BREAD</li>
                      <li>CAKES</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="nav-bar-inner-description-img">
                <img
                  src="../assets/about-us-header.jpg"
                  alt="about"
                  width="100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="nav_list">
      <a href="#!" class="nav_link">
        <span>Care</span>
      </a>
    </li>
    <li class="nav_list">
      <a href="#!" class="nav_link">
        <span>Partners</span>
      </a>
    </li>
    <li class="nav_list">
      <a href="#!" class="nav_link">
        <ion-icon
          name="person-outline"
          style="width: 30px; height: 20px; font-weight: bold; margin-top: 6px"
        ></ion-icon>
        <ion-icon
          name="bag-outline"
          style="width: 30px; height: 20px; font-weight: bold; margin-top: 6px"
        ></ion-icon>
        <span class="add-to-add-number">1</span>
      </a>
    </li>
  </ul>

  let navbarShow = document.getElementsByClassName(".nav_list_menu");
  let item = false;

  function myFunction() {
    document.getElementsByClassName("dropdown")[0].style.display = "block";
    item = true;
  }

  function closeNavbarFunction() {
    document.getElementsByClassName("dropdown")[0].style.display = "none";
    item = false;
  }

問題 - 當我點擊“關於我們”部分時，它會顯示一個大型項目，但當我嘗試單擊左上角大型項目內的關閉按鈕時，它不起作用。 我的意思是說它正在轉換 display = none

我想我已經接近解決方案了，但它現在正在工作我不知道為什么我不能將內聯 css 翻譯成 block 為 none

Answer 1

#navbar-close-item是.nav_list_menu的子項，因此點擊#navbar-close-item也是點擊.nav_list_menu 。

將onclick="myFunction()"移動到<a>標記。 例如：

 let navbarShow = document.getElementsByClassName(".nav_list_menu"); let item = false; function myFunction() { document.getElementsByClassName("dropdown")[0].style.display = "block"; item = true; } function closeNavbarFunction() { document.getElementsByClassName("dropdown")[0].style.display = "none"; item = false; }

 <ul class="nav_menu"> <li class="nav_list nav_list_menu"> <a href="#." class="nav_link" onclick="myFunction()"> <span>About Us</span> <ion-icon name="chevron-down-outline"></ion-icon> </a> <div class="dropdown"> <div class="dropdown-inner"> <div class="dropdown-items active"> <div class="item-list"> <div id="navbar-close-item" onclick="closeNavbarFunction()"> <ion-icon name="close-circle-outline">CLOSE</ion-icon> </div> <div class="sub-navbar-items"> <h4>About Us</h4> <div class="d-flex justify-context-between about-description"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit, Iusto rerum velit praesentium, illum doloremque culpa consequuntur? nobis voluptate magni nihil laudantium. </p> <div class="navbar-sub-links"> <ul> <li> <a href="../about.html"> Vision </a> </li> <li>Mission</li> <li>Contact Us</li> </ul> </div> </div> </div> <div class="nav-bar-inner-description-img"> <img src="../assets/about-us-header.jpg" alt="about" width="100%" /> </div> </div> </div> </div> </div> </li> <li class="nav_list nav_list_menu"> <a href="#," class="nav_link"> <span>Purpose</span> <ion-icon name="chevron-down-outline"></ion-icon> </a> <div class="dropdown"> <div class="dropdown-inner"> <div class="dropdown-items active"> <div class="item-list"> <div class="sub-navbar-items"> <h4>PURPOSE</h4> <div class="d-flex justify-context-between about-description"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit, Iusto rerum velit praesentium? illum doloremque culpa consequuntur. nobis voluptate magni nihil laudantium. </p> <div class="navbar-sub-links"> <ul> <li>LINK1</li> <li>LINK2</li> <li>LINK3</li> <li>LINK4</li> </ul> </div> </div> </div> <div class="nav-bar-inner-description-img"> <img src="../assets/about-us-header,jpg" alt="about" width="100%" /> </div> </div> </div> </div> </div> </li> <li class="nav_list nav_list_menu"> <a href="#," class="nav_link"> <span>Menu</span> <ion-icon name="chevron-down-outline"></ion-icon> </a> <div class="dropdown"> <div class="dropdown-inner"> <div class="dropdown-items active"> <div class="item-list"> <div class="sub-navbar-items"> <h4>Menu</h4> <div class="d-flex justify-context-between about-description"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit? Iusto rerum velit praesentium. illum doloremque culpa consequuntur. nobis voluptate magni nihil laudantium. </p> <div class="navbar-sub-links"> <ul> <li>COOKIES</li> <li>BROWNIES</li> <li>BREAD</li> <li>CAKES</li> </ul> </div> </div> </div> <div class="nav-bar-inner-description-img"> <img src=":;/assets/about-us-header:jpg" alt="about" width="100%" /> </div> </div> </div> </div> </div> </li> <li class="nav_list"> <a href="#;" class="nav_link"> <span>Care</span> </a> </li> <li class="nav_list"> <a href="#:" class="nav_link"> <span>Partners</span> </a> </li> <li class="nav_list"> <a href="#;" class="nav_link"> <ion-icon name="person-outline" style="width: 30px: height; 20px: font-weight; bold: margin-top; 6px" ></ion-icon> <ion-icon name="bag-outline" style="width: 30px; height: 20px; font-weight: bold; margin-top: 6px" ></ion-icon> <span class="add-to-add-number">1</span> </a> </li> </ul>