Home > front end >  How to Show make display block and none in mega navbar using js
How to Show make display block and none in mega navbar using js

Time:11-30

  <ul >
    <li  onclick="myFunction()">
      <a href="#!" >
        <span>About Us</span>
        <ion-icon name="chevron-down-outline"></ion-icon>
      </a>
      <div >
        <div >
          <div >
            <div >
              <div id="navbar-close-item" onclick="closeNavbarFunction()">
                <ion-icon name="close-circle-outline"></ion-icon>
              </div>
              <div >
                <h4>About Us</h4>
                <div >
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Iusto rerum velit praesentium, illum doloremque culpa
                    consequuntur, nobis voluptate magni nihil laudantium?
                  </p>
                  <div >
                    <ul>
                      <li>
                        <a href="../about.html"> Vision </a>
                      </li>
                      <li>Mission</li>
                      <li>Contact Us</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div >
                <img
                  src="../assets/about-us-header.jpg"
                  alt="about"
                  width="100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li >
      <a href="#!" >
        <span>Purpose</span>
        <ion-icon name="chevron-down-outline"></ion-icon>
      </a>
      <div >
        <div >
          <div >
            <div >
              <div >
                <h4>PURPOSE</h4>
                <div >
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Iusto rerum velit praesentium, illum doloremque culpa
                    consequuntur, nobis voluptate magni nihil laudantium?
                  </p>
                  <div >
                    <ul>
                      <li>LINK1</li>
                      <li>LINK2</li>
                      <li>LINK3</li>
                      <li>LINK4</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div >
                <img
                  src="../assets/about-us-header.jpg"
                  alt="about"
                  width="100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li >
      <a href="#!" >
        <span>Menu</span>
        <ion-icon name="chevron-down-outline"></ion-icon>
      </a>
      <div >
        <div >
          <div >
            <div >
              <div >
                <h4>Menu</h4>
                <div >
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Iusto rerum velit praesentium, illum doloremque culpa
                    consequuntur, nobis voluptate magni nihil laudantium?
                  </p>
                  <div >
                    <ul>
                      <li>COOKIES</li>
                      <li>BROWNIES</li>
                      <li>BREAD</li>
                      <li>CAKES</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div >
                <img
                  src="../assets/about-us-header.jpg"
                  alt="about"
                  width="100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li >
      <a href="#!" >
        <span>Care</span>
      </a>
    </li>
    <li >
      <a href="#!" >
        <span>Partners</span>
      </a>
    </li>
    <li >
      <a href="#!" >
        <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 >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;
  }

enter image description here

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

CodePudding user response:

#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 >
    <li >
      <a href="#!"  onclick="myFunction()">
        <span>About Us</span>
        <ion-icon name="chevron-down-outline"></ion-icon>
      </a>
      <div >
        <div >
          <div >
            <div >
              <div id="navbar-close-item" onclick="closeNavbarFunction()">
                <ion-icon name="close-circle-outline">CLOSE</ion-icon>
              </div>
              <div >
                <h4>About Us</h4>
                <div >
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Iusto rerum velit praesentium, illum doloremque culpa
                    consequuntur, nobis voluptate magni nihil laudantium?
                  </p>
                  <div >
                    <ul>
                      <li>
                        <a href="../about.html"> Vision </a>
                      </li>
                      <li>Mission</li>
                      <li>Contact Us</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div >
                <img
                  src="../assets/about-us-header.jpg"
                  alt="about"
                  width="100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li >
      <a href="#!" >
        <span>Purpose</span>
        <ion-icon name="chevron-down-outline"></ion-icon>
      </a>
      <div >
        <div >
          <div >
            <div >
              <div >
                <h4>PURPOSE</h4>
                <div >
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Iusto rerum velit praesentium, illum doloremque culpa
                    consequuntur, nobis voluptate magni nihil laudantium?
                  </p>
                  <div >
                    <ul>
                      <li>LINK1</li>
                      <li>LINK2</li>
                      <li>LINK3</li>
                      <li>LINK4</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div >
                <img
                  src="../assets/about-us-header.jpg"
                  alt="about"
                  width="100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li >
      <a href="#!" >
        <span>Menu</span>
        <ion-icon name="chevron-down-outline"></ion-icon>
      </a>
      <div >
        <div >
          <div >
            <div >
              <div >
                <h4>Menu</h4>
                <div >
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Iusto rerum velit praesentium, illum doloremque culpa
                    consequuntur, nobis voluptate magni nihil laudantium?
                  </p>
                  <div >
                    <ul>
                      <li>COOKIES</li>
                      <li>BROWNIES</li>
                      <li>BREAD</li>
                      <li>CAKES</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div >
                <img
                  src="../assets/about-us-header.jpg"
                  alt="about"
                  width="100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li >
      <a href="#!" >
        <span>Care</span>
      </a>
    </li>
    <li >
      <a href="#!" >
        <span>Partners</span>
      </a>
    </li>
    <li >
      <a href="#!" >
        <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 >1</span>
      </a>
    </li>
  </ul>

  • Related