Раскрывающиеся и сворачивающиеся раскрывающиеся меню

Question

Я разрабатываю меню навигации, которое содержит некоторые пункты меню (Главная, О нас, Прием ...). Используя заполнитель справа, я смог успешно открыть и закрыть раскрывающееся меню «О нас». Вопрос в том, как я могу добиться того же с другими пунктами меню (в частности, с раскрывающимся меню «Допуск») без необходимости назначать определенный c id каждому элементу меню? Кроме того, как я могу закрыть меню навигации при щелчке по внешней среде?

document.getElementById("showSubMenu").addEventListener("click", openSubMenu);

function openSubMenu() {
  let subMenuBar = document.getElementById("subMenu-Items");
  subMenuBar.style.display = "block";

  document.getElementById("showSubMenu").style.display = "none";
  document.getElementById("hideSubMenu").style.display = "inline";
}

document.getElementById("hideSubMenu").addEventListener("click", closeSubMenu);

function closeSubMenu() {
  let subMenuBar = document.getElementById("subMenu-Items");
  subMenuBar.style.display = "none";

  document.getElementById("showSubMenu").style.display = "inline";
  document.getElementById("hideSubMenu").style.display = "none";
}

body {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px;
  background: black;
}

* {
  box-sizing: border-box;
  /* margin: 0; */
  padding: 0;
}


/* NAVIGATION MENU BAR */

.navMenu-Container {
  display: block;
  position: absolute;
  right: 0;
  padding: 25px 0;
  width: 100%;
  background-color: rgb(15, 14, 18);
}

.search {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0px 10px 25px 20px;
  border-bottom: 2px solid rgb(41, 35, 35);
  width: fit-content;
  box-shadow: 3px 0px 5px 0px white;
}

.searchBox {
  padding: 5px 10px;
  font-size: 16px;
}

.searchArrow {
  width: fit-content;
  height: fit-content;
  padding: 2px 5px;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

.searchArrow img {
  width: 26px;
  height: 22px;
}

.searchArrow:hover {
  cursor: pointer;
}

.navMenu {
  margin-top: 40px;
}

.navMenu .menuItems {
  list-style-type: none;
  text-align: left;
}

.navMenu .menuItems>li,
.navMenu .subMenu-Items>li {
  width: 100%;
  border-bottom: 2px solid rgb(41, 35, 35);
}

.navMenu .menuItems>li:first-child {
  border-top: 2px solid rgb(41, 35, 35);
}

.navMenu .menuItems>li>a:link {
  display: inline-flex;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  padding: 18px 15px;
  width: 80%;
}

.navMenu .menuItems>li>a:visited,
.navMenu .subMenu-Items>li>a:visited {
  color: white;
}

.navMenu .menuItems>li>a:hover,
.navMenu .subMenu-Items>li>a:hover {
  cursor: pointer;
  background-color: navy;
}

.navMenu .menuItems>li>a:active,
.navMenu .subMenu-Items>li>a:active {
  background-color: white;
  color: navy;
}

.navMenu .menuItems>li>.showSubMenu,
.navMenu .menuItems>li>.hideSubMenu {
  width: fit-content;
  height: fit-content;
  padding: 15px;
}

.navMenu .menuItems>li>.showSubMenu img,
.navMenu .menuItems>li>.hideSubMenu img {
  width: 15px;
  height: 15px;
}

.navMenu .menuItems>li>.hideSubMenu {
  display: none;
}

.navMenu .menuItems>li>.showSubMenu:hover,
.navMenu .menuItems>li>.hideSubMenu:hover {
  cursor: pointer;
  background-color: navy;
}

.navMenu .subMenu-Items>li>a:link {
  display: inline-flex;
  color: white;
  text-decoration: none;
  text-transform: capitalize;
  padding: 8px 50px;
  width: 80%;
}

.navMenu .subMenu-Items {
  display: none;
}


/* MEDIA QUERIES */

@media only screen and (max-width: 480px) {}

@media only screen and (max-width: 600px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (max-width: 992px) {}

@media only screen and (max-width: 1200px) {}

@media only screen and (min-width: 1200px) {}

<!-- NAVIGATION MENU -->
<div id="navMenu-Container" class="navMenu-Container">
  <div class="search">
    <input type="text" class="searchBox" placeholder="Search..." />
    <div class="searchArrow"><img src="Icons/Arrow (Right).png" alt="Go" /></div>
  </div>

  <nav class="navMenu">
    <ul class="menuItems">
      <li><a href="index.html">Home</a></li>
      <li>
        <a class="aboutus" href="aboutus.html">About Us</a>
        <span id="showSubMenu" class="showSubMenu"><img src="http://via.placeholder.com/20/" alt="" /></span>
        <span id="hideSubMenu" class="hideSubMenu"><img src="http://via.placeholder.com/20/" alt="" /></span>
        <ul id="subMenu-Items" class="subMenu-Items">
          <li><a href="">History</a></li>
          <li><a href="">Our Community</a></li>
          <li><a href="">Achievements</a></li>
          <li><a href="">Vision, Mission & Core Values</a></li>
          <li><a href="">Head Teacher's Note</a></li>
          <li><a href="">School Songs & Prayer</a></li>
          <li><a href="">FAQs</a></li>
        </ul>
      </li>
      <li>
        <a class="admissions" href="admissions.html">Admissions</a>
        <span id="showSubMenu" class="showSubMenu"><img src="http://via.placeholder.com/20/" alt="" /></span>
        <span id="hideSubMenu" class="hideSubMenu"><img src="http://via.placeholder.com/20/" alt="" /></span>
        <ul id="subMenu-Items" class="subMenu-Items">
          <li><a href="">Why BGS?</a></li>
          <li><a href="">Admission Process</a></li>
          <li><a href="">Entrance Examination</a></li>
        </ul>
      </li>
      <li><a class="academics" href="academics.html">Academics</a></li>
      <li><a class="gallery" href="gallery.html">Gallery</a></li>
      <li><a class="alumni" href="events.html">Events</a></li>
      <li><a class="contactus" href="contactus.html">Contact Us</a></li>
      <li><a class="login" href="login.html">Log In</a></li>
    </ul>
  </nav>
</div>

Answer 1

В опубликованном вами коде было много ненужного контента, не имеющего отношения к вашему вопросу.

Итак, вот небольшой фрагмент, который делает то, что вам нужно.

Что вам нужно сделать, так это указать цель для каждого переключателя меню. Добавьте прослушиватели событий к этим переключателям и вытяните связанную цель, используя javascript.

Вместо того, чтобы показывать и скрывать элементы с помощью javascript, вам лучше использовать css для этого. Таким образом вы можете добавлять и удалять классы, которые сообщают вам, открыто ваше меню или нет. В данном случае я использовал «открыть меню».

var toggles = document.querySelectorAll('.toggle');
// console.log(toggles);
toggles.forEach(
    (toggle) => {
        toggle.addEventListener('click', function () {
          const id = toggle.getAttribute('data-target');
          const menu = document.getElementById(id);
          menu.classList.toggle('menu-open');          
        })
    }
)

body {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px;
  background: black;
}

* {
  box-sizing: border-box;
  /* margin: 0; */
  padding: 0;
}

.navMenu {
  margin-top: 40px;
}

.navMenu .menuItems {
  list-style-type: none;
  text-align: left;
}

.navMenu .menuItems > li,
.navMenu .subMenu-Items > li {
  width: 100%;
  border-bottom: 2px solid rgb(41, 35, 35);
}

.navMenu .menuItems > li:first-child {
  border-top: 2px solid rgb(41, 35, 35);
}

.navMenu .menuItems > li > a:link {
  display: inline-flex;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  padding: 18px 15px;
  width: 80%;
}

.navMenu .menuItems > li > a:visited,
.navMenu .subMenu-Items > li > a:visited {
  color: white;
}

.navMenu .menuItems > li > a:hover,
.navMenu .subMenu-Items > li > a:hover {
  cursor: pointer;
  background-color: navy;
}

.navMenu .menuItems > li > a:active,
.navMenu .subMenu-Items > li > a:active {
  background-color: white;
  color: navy;
}

.navMenu .menuItems > li .showSubMenu,
.navMenu .menuItems > li .hideSubMenu {
  width: fit-content;
  height: fit-content;
  padding: 15px;
}

.navMenu .menuItems > li > .showSubMenu img,
.navMenu .menuItems > li > .hideSubMenu img {
  width: 15px;
  height: 15px;
}

.navMenu .menuItems > li .hideSubMenu {
  display: none;
}

.navMenu .menuItems > li .showSubMenu:hover,
.navMenu .menuItems > li .hideSubMenu:hover {
  cursor: pointer;
  background-color: navy;
}

.navMenu .subMenu-Items li > a:link {
  display: inline-flex;
  color: white;
  text-decoration: none;
  text-transform: capitalize;
  padding: 8px 50px;
  width: 80%;
}

.navMenu .subMenu-Items {
  display: none;
}
.navMenu .menu-open .subMenu-Items {
	display: block;
}

<nav class="navMenu">
  <ul class="menuItems">
    <li><a href="index.html">Home</a></li>
    <li id="sub-1">
      <a class="aboutus" href="aboutus.html">About Us</a>
      <span class="toggle" data-target="sub-1">
        <span id="showSubMenu" class="showSubMenu">
          <img src="http://via.placeholder.com/20/" alt="" />
        </span>
        <span id="hideSubMenu" class="hideSubMenu">
          <img src="http://via.placeholder.com/20/" alt="" />
        </span>
      </span>
      <ul id="subMenu-Items" class="subMenu-Items">
        <li><a href="">History</a></li>
        <li><a href="">Our Community</a></li>
        <li><a href="">Achievements</a></li>
        <li><a href="">Vision, Mission & Core Values</a></li>
        <li><a href="">Head Teacher's Note</a></li>
        <li><a href="">School Songs & Prayer</a></li>
        <li><a href="">FAQs</a></li>
      </ul>
    </li>
    <li id="sub-2">
      <a class="admissions" href="admissions.html">Admissions</a>
      <span class="toggle" data-target="sub-2">
        <span id="showSubMenu" class="showSubMenu">
          <img src="http://via.placeholder.com/20/" alt="" />
        </span>
        <span id="hideSubMenu" class="hideSubMenu">
          <img src="http://via.placeholder.com/20/" alt="" />
        </span>
      </span>
      <ul id="subMenu-Items" class="subMenu-Items">
        <li><a href="">Why BGS?</a></li>
        <li><a href="">Admission Process</a></li>
        <li><a href="">Entrance Examination</a></li>
      </ul>
    </li>
    <li><a class="academics" href="academics.html">Academics</a></li>
  </ul>
</nav>

Answer 2

Объединили два щелчка в один и обработали их в общем на основе классов, и теперь, если вы разместите эти классы на большем количестве элементов, вам нужно будет зарегистрировать любые новые события щелчка. Надеюсь, это поможет.

	document.getElementById("trigram").addEventListener("click", openNavMenu);

function openNavMenu() {
  let navMenuBar = document.getElementById("navMenu-Container");
  navMenuBar.style.display = "block";

  document.getElementById("trigram").style.display = "none";
  document.getElementById("close").style.display = "block";
  document.getElementById("preTopNav").style.display = "none";
}

document.getElementById("close").addEventListener("click", closeNavMenu);

function closeNavMenu() {
  let navMenuBar = document.getElementById("navMenu-Container");
  navMenuBar.style.display = "none";

  document.getElementById("trigram").style.display = "block";
  document.getElementById("close").style.display = "none";
  document.getElementById("preTopNav").style.display = "flex";
}

// I have merged both event 'hideSubMenu' and 'openSubMenu' into single event and showed hide menu on the base of the class on the target and now it will work on any element with these classes no need to register new click events.

document.getElementById("mainMenu").addEventListener("click", toggleSubMenu);

function toggleSubMenu(event) {
	if(event.target.classList.contains('showSubMenu')) {
    let subMenuBar = event.target.parentNode.getElementsByClassName("subMenu-Items");
    for(let i=0; i<subMenuBar.length; i++) {
      subMenuBar[i].style.display = "block";
    }

    event.target.parentNode.querySelector("#showSubMenu").style.display = "none";
    event.target.parentNode.querySelector("#hideSubMenu").style.display = "inline";
   } else if(event.target.classList.contains('hideSubMenu')) {
      let subMenuBar = event.target.parentNode.getElementsByClassName("subMenu-Items");
    
    for(let i=0; i<subMenuBar.length; i++) {
      subMenuBar[i].style.display = "none";
    }

    event.target.parentNode.querySelector("#showSubMenu").style.display = "inline";
    event.target.parentNode.querySelector("#hideSubMenu").style.display = "none";
   }
}

body {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px;
  background: black;
}

* {
  box-sizing: border-box;
  /* margin: 0; */
  padding: 0;
}

.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.67%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.67%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33%;
}

.col-8 {
  width: 66.67%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33%;
}

.col-11 {
  width: 91.67%;
}

.col-12 {
  width: 100%;
}

.navBar-Container {
  background-color: #fff;
  padding: 5px 0px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
}

.schoolBatch {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.schoolTitle {
  margin-left: 10px;
  padding: 0;
}

.schoolName {
  font-weight: 700;
  font-size: 14px;
}

.schoolMotto {
  font-size: 12px;
  font-style: italic;
  margin: 0;
  text-align: center;
  padding: auto 0;
}

.schoolLogo {
  width: 60px;
  height: 50px;
}


/* Clicking the trigram */

.navBarTrigram img {
  width: 35px;
  height: 25px;
}

.navBarTrigram {
  width: fit-content;
}

.navBarTrigram:hover {
  cursor: pointer;
}

.navBarTrigram .close {
  display: none;
}


/* NAVIGATION MENU BAR */

.navMenu-Container {
  display: none;
  position: absolute;
  right: 0;
  padding: 25px 0;
  width: 100%;
  background-color: rgb(15, 14, 18);
}

.search {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0px 10px 25px 20px;
  border-bottom: 2px solid rgb(41, 35, 35);
  width: fit-content;
  box-shadow: 3px 0px 5px 0px white;
}

.searchBox {
  padding: 5px 10px;
  font-size: 16px;
}

.searchArrow {
  width: fit-content;
  height: fit-content;
  padding: 2px 5px;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

.searchArrow img {
  width: 26px;
  height: 22px;
}

.searchArrow:hover {
  cursor: pointer;
}

.navMenu {
  margin-top: 40px;
}

.navMenu .menuItems {
  list-style-type: none;
  text-align: left;
}

.navMenu .menuItems>li,
.navMenu .subMenu-Items>li {
  width: 100%;
  border-bottom: 2px solid rgb(41, 35, 35);
}

.navMenu .menuItems>li:first-child {
  border-top: 2px solid rgb(41, 35, 35);
}

.navMenu .menuItems>li>a:link {
  display: inline-flex;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  padding: 18px 15px;
  width: 80%;
}

.navMenu .menuItems>li>a:visited,
.navMenu .subMenu-Items>li>a:visited {
  color: white;
}

.navMenu .menuItems>li>a:hover,
.navMenu .subMenu-Items>li>a:hover {
  cursor: pointer;
  background-color: navy;
}

.navMenu .menuItems>li>a:active,
.navMenu .subMenu-Items>li>a:active {
  background-color: white;
  color: navy;
}

.navMenu .menuItems>li>.showSubMenu,
.navMenu .menuItems>li>.hideSubMenu {
  width: fit-content;
  height: fit-content;
  padding: 15px;
}

.navMenu .menuItems>li>.showSubMenu img,
.navMenu .menuItems>li>.hideSubMenu img {
  width: 15px;
  height: 15px;
}

.navMenu .menuItems>li>.hideSubMenu {
  display: none;
}

.navMenu .menuItems>li>.showSubMenu:hover,
.navMenu .menuItems>li>.hideSubMenu:hover {
  cursor: pointer;
  background-color: navy;
}

.navMenu .subMenu-Items>li>a:link {
  display: inline-flex;
  color: white;
  text-decoration: none;
  text-transform: capitalize;
  padding: 8px 50px;
  width: 80%;
}

.navMenu .subMenu-Items {
  display: none;
}


/* MEDIA QUERIES */

@media only screen and (max-width: 480px) {}

@media only screen and (max-width: 600px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (max-width: 992px) {}

@media only screen and (max-width: 1200px) {}

@media only screen and (min-width: 1200px) {}

<!-- NAVIGATION BAR -->
<div class="navBar-Container">
  <div class="schoolBatch col-10">
    <div class="schoolLogo-Container"><img src="Icons/bethellogo.png" class="schoolLogo" alt="BGS Logo" /></div>
    <div class="schoolTitle">
      <div class="schoolName">BETHEL GEMINI SCHOOLS</div>
      <div class="schoolMotto">Heaven's Light, Our Ground</div>
    </div>
  </div>
  <div class="navBarTrigram col-2">
    <img id="trigram" class="trigram" src="http://via.placeholder.com/20/" alt="trigram" />
    <img id="close" class="close" src="Icons/close.png" alt="close" />
  </div>
</div>

<!-- NAVIGATION MENU -->
<div id="navMenu-Container" class="navMenu-Container">
  <div class="search">
    <input type="text" class="searchBox" placeholder="Search..." />
    <div class="searchArrow"><img src="Icons/Arrow (Right).png" alt="Go" /></div>
  </div>

  <nav class="navMenu">
    <ul id="mainMenu" class="menuItems">
      <li><a href="index.html">Home</a></li>
      <li>
        <a class="aboutus" href="aboutus.html">About Us</a>
        <span id="showSubMenu" class="showSubMenu"><img src="http://via.placeholder.com/20/" alt="" /></span>
        <span id="hideSubMenu" class="hideSubMenu"><img src="http://via.placeholder.com/20/" alt="" /></span>
        <ul id="subMenu-Items" class="subMenu-Items">
          <li><a href="">History</a></li>
          <li><a href="">Our Community</a></li>
          <li><a href="">Achievements</a></li>
          <li><a href="">Vision, Mission & Core Values</a></li>
          <li><a href="">Head Teacher's Note</a></li>
          <li><a href="">School Songs & Prayer</a></li>
          <li><a href="">FAQs</a></li>
        </ul>
      </li>
      <li>
        <a class="admissions" href="admissions.html">Admissions</a>
        <span id="showSubMenu" class="showSubMenu"><img src="http://via.placeholder.com/20/" alt="" /></span>
        <span id="hideSubMenu" class="hideSubMenu"><img src="http://via.placeholder.com/20/" alt="" /></span>
        <ul id="subMenu-Items" class="subMenu-Items">
          <li><a href="">Why BGS?</a></li>
          <li><a href="">Admission Process</a></li>
          <li><a href="">Entrance Examination</a></li>
        </ul>
      </li>
      <li><a class="academics" href="academics.html">Academics</a></li>
      <li><a class="gallery" href="gallery.html">Gallery</a></li>
      <li><a class="alumni" href="events.html">Events</a></li>
      <li><a class="contactus" href="contactus.html">Contact Us</a></li>
      <li><a class="login" href="login.html">Log In</a></li>
    </ul>
  </nav>
</div>