如何使用 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;
  }

Problem - When I click into the about us section, it will show a mega item, but when I try to click on the close button inside the mega items top left, it's not working. I meant to say it's converting display = none

I think I am close to solution but it's now working i don't know why i can't translate inline css to block to none

Answer 1

#navbar-close-item is a child of .nav_list_menu so a click on #navbar-close-item is also a click on .nav_list_menu .

Move the onclick="myFunction()" to the <a> tag. EG:

 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>