移动菜单加号和减号图标（Vanilla JS）

Question

I am trying to create a mobile menu with Vanilla JS. For this mobile menu I want to add icons to the end of each menu item that has a sub list within it. Now the problem lies with the toggling action of the sub list. When I click on the anchor tag for the list item I want the minus icon to appear and one more click would make the sub list disappear and the plus icon reappear.

I am having trouble trying to navigate a solution to this seeing as I am using data toggles to attach each respective anchor tag to their respective sub lists. Posted below is some of the code I used from a previous project that worked but this one seems to be a bit buggy. Any help or advice is much appreciated!

Thanks!

 <div class="svg-legend" aria-hidden="true">
        <!-- Inline SVG's Here -->
        <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
            <symbol id="icon-minus" viewBox="0 0 24 24">
            <path d="M5 13h14c0.552 0 1-0.448 1-1s-0.448-1-1-1h-14c-0.552 0-1 0.448-1 1s0.448 1 1 1z"></path>
            </symbol>
            <symbol id="icon-plus" viewBox="0 0 24 24">
            <path d="M5 13h6v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1z"></path>
            </symbol>
            <symbol id="icon-bars" viewBox="0 0 24 28">
            <path d="M24 21v2c0 0.547-0.453 1-1 1h-22c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h22c0.547 0 1 0.453 1 1zM24 13v2c0 0.547-0.453 1-1 1h-22c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h22c0.547 0 1 0.453 1 1zM24 5v2c0 0.547-0.453 1-1 1h-22c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h22c0.547 0 1 0.453 1 1z"></path>
            </symbol>
            </defs>
            </svg>
    </div>

<header class="siteHeader clearfix">
            <div class="container">
                <div class="formee gutterless topnav__container">
                    <div class="grid_5 topnav__search-container">
                        <label class="topnav__input-label">Search</label>
                        <input class="topnav__input" type="text" placeholder="enter keyword search" />
                        <div class="topnav__search-svg-container">
                            <svg class="icon icon-search3x topnav__search-svg">
                                <use xlink:href="#icon-search3x"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="grid_2 topnav__btn-container">
                        <span class="">
                            <button class="topnav__btn" type="button">Member Login</button>
                        </span>
                    </div>
                    <div class="grid_2 topnav__btn-container">
                        <a href="#" class="">
                            <button class="topnav__btn topnav__btn-alt" type="button">Join Today</button>
                        </a>
                    </div>
                </div>              
                <nav class="mainNav clearfix">
                    <div class="grid_3 sitelogo__container">
                        <a class="sitelogo" href="#">
                            <img src="../Logo Default.png" class="navbar__logo"
                            alt="logo"/>
                        </a>
                    </div>
                    <div class="menuLink icon-list">
                        <span class="visuallyHidden">Menu</span>
                        <svg class="icon icon-bars menu__toggle-svg">
                            <use xlink:href="#icon-bars"></use>
                        </svg>
                    </div>
                    <ul class="navbar__menu-list">
                        <li class="navbar__menu-list-item">
                            <a class="navbar__menu-list-item-link" data-toggle data-target="list-1">About Us
                                <div class="navbar__menu-svg-container">
                                    <svg class="icon icon-plus  navbar__menu-plus-svg"><use xlink:href="#icon-plus"></use></svg>
                                    <svg class="icon icon-minus navbar__menu-minus-svg"><use xlink:href="#icon-minus"></use></svg>
                                </div>
                            </a>
                            <ul class="navbar__sub-menu-list" id="list-1">
                                <li class="navbar__sub-menu-list-item">
                                    <a class="navbar__sub-menu-list-item-link" href="#">Our History</a>
                                </li>
                                <li class="navbar__sub-menu-list-item">
                                    <a class="navbar__sub-menu-list-item-link" href="#">Our Staff</a>
                                </li>
                                <li class="navbar__sub-menu-list-item">
                                    <a class="navbar__sub-menu-list-item-link" href="#">CCPA Boards</a>
                                </li>
                                <li class="navbar__sub-menu-list-item">
                                    <a class="navbar__sub-menu-list-item-link" href="#">CCPA Bylaws</a>
                                </li>
                            </ul>
                        </li>
                        <li class="navbar__menu-list-item">
                            <a class="navbar__menu-list-item-link" href="#">Vendor Partners</a>
                        </li>
                        <li class="navbar__menu-list-item">
                            <a class="navbar__menu-list-item-link" href="#">Membership Options & Benefits</a>
                        </li>
                        <li class="navbar__menu-list-item">
                            <a class="navbar__menu-list-item-link" href="#">News & Resources</a>
                        </li>
                        <li class="navbar__menu-list-item">
                            <a class="navbar__menu-list-item-link" href="#">Contact Us</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>

JS

 const dataToggle = document.querySelectorAll("[data-toggle]");
  // const menuLink = document.querySelector(".navbar__menu-list-item-link");
  const minusBtn = document.querySelector(".navbar__menu-minus-svg");
  const plusBtn = document.querySelector(".navbar__menu-plus-svg");

  for (var i = 0; dataToggle.length > i; i++) {
    let thisButton = dataToggle[i];
    let dataTarget = thisButton.getAttribute("data-target");
    let targetedItem = document.getElementById(dataTarget);

    thisButton.addEventListener("click", () => {
      if (targetedItem.classList.contains("navbar__sub-menu-toggle-show")) {
        targetedItem.classList.remove("navbar__sub-menu-toggle-show");
        targetedItem.setAttribute("aria-expanded", "false");
        console.log(minusBtn);
        console.log(plusBtn);
        minusBtn.style.display = "none";
        plusBtn.style.display = "block";
      } else {
        targetedItem.classList.add("navbar__sub-menu-toggle-show");
        targetedItem.setAttribute("aria-expanded", "true");
        minusBtn.style.display = "block";
        plusBtn.style.display = "none";
      }
      // console.log(targetedItem);
    });
  }

/* TOP NAV */

.topnav__search-container {
  background-color: #1b75d5;
  padding: 20px 10px !important;
  width: 100% !important;
}

.topnav__input-label {
  display: none !important;
}

.topnav__input {
  width: 100% !important;
  background-color: #eeeeee !important;
  padding: 11px 45px !important;
  border-radius: 5px;
  border: none;
  box-sizing: border-box;
  font-style: italic;
  border: 2px solid transparent;
}

.topnav__input:hover {
  border: 2px solid #1b75d5;
}

.topnav__search-svg-container {
  position: relative;
  top: -30px;
  left: 18px;
  width: 5%;
}

.topnav__search-svg {
  width: 17px;
  height: 17px;
}

.topnav__btn-container {
  width: 50% !important;
  padding: 0 !important;
}

.topnav__btn {
  background: rgb(2, 90, 184);
  background: linear-gradient(
    180deg,
    rgba(2, 90, 184, 1) 0%,
    rgba(27, 117, 213, 1) 53%
  );
  color: white;
  border: none;
  padding: 20px;
  border-radius: 0 0 0 10px;
  width: 100%;
  font-style: italic;
  font-weight: 600;
  text-transform: uppercase;
}

.topnav__btn:hover,
.topnav__btn:focus {
  text-decoration: underline;
}

.topnav__btn-alt {
  background: rgb(145, 181, 36);
  background: linear-gradient(
    180deg,
    rgba(145, 181, 36, 1) 0%,
    rgba(120, 159, 0, 1) 100%
  );
  border-radius: 0 0 10px 0;
}

.sitelogo__container {
  width: 85% !important;
  padding: 10px !important;
}

.navbar__logo {
  width: 100%;
}

.menu__toggle-container {
  position: relative;
  top: 20px;
}

.menu__toggle-svg {
  width: 30px;
  height: 30px;
}

@media (min-width: 1024px) {
  .topnav__container {
    display: flex;
    justify-content: flex-end;
    padding-right: 40px;
  }

  .topnav__search-container {
    width: 30% !important;
    top: -7px;
    padding: 0 !important;
    background-color: transparent;
  }

  .topnav__input {
    border-radius: 0 0 0 8px !important;
  }

  .topnav__btn-container {
    width: 20% !important;
    top: -7px;
  }

  .sitelogo__container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    padding-bottom: 5px;
  }
}

@media (min-width: 1440px) {
  .sitelogo__container {
    width: 25% !important;
  }
}

@media (min-width: 1920px) {
  .topnav__search-container {
    width: 26.4% !important;
  }

  .topnav__btn-container {
    width: 12.25% !important;
  }

  .topnav__btn {
    padding: 18px 20px;
  }

  .topnav__container {
    max-height: 50px;
  }

  .sitelogo__container {
    padding: 0 10px 10px;
  }

  .navbar__logo {
    width: 100%;
  }
}

/* NAVBAR MENU STYLES */
/* NAVBAR MENU STYLES */
/* NAVBAR MENU STYLES */

.menuLink {
  position: absolute;
  right: 20px;
  bottom: 40px;
}

.navbar__menu-list {
  width: 100%;
  display: none !important;
  list-style-type: none;
  background-color: #fff;
  padding: 0;
  position: absolute;
  top: 235px;
  border-top: 5px solid #1b75d5;
  border-radius: 0 0 10px 10px;
  font-size: 1.25rem;
}

.navbar__menu-list li a {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar__menu-list li a:hover {
  text-decoration: underline;
  color: #1b75d5;
}

.navbar__menu-toggle-show {
  display: block !important;
}

.navbar__sub-menu-toggle-show {
  display: block !important;
}

.navbar__menu-list li {
  padding: 10px 15px;
}

.navbar__menu-list-item {
  padding: 5px 0;
}

.navbar__menu-list-item-link,
.navbar__sub-menu-list-item-link {
  color: #6d6d6d !important;
  text-decoration: none;
  display: flex !important;
  justify-content: space-between;
  cursor: pointer;
}

.navbar__menu-list-item-link:hover,
.navbar__menu-list-item-link:focus,
.navbar__sub-menu-list-item-link:hover,
.navbar__sub-menu-list-item-link:focus {
  text-decoration: underline !important;
  color: #1b75d5 !important;
}

.navbar__menu-list .navbar__menu-list-item:last-child a {
  border: none;
}

.navbar__sub-menu-list {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  padding-left: 3px;
}

ul.navbar__menu-list li ul {
  display: none;
  width: auto;
  background: #fff;
  border-bottom: 3px solid #cbcbcb;
  border-radius: 0 0 10px 10px;
  padding: 0;
  list-style-type: none;
}

.navbar__sub-menu-list-item-link {
  border-bottom: 1px solid #1b75d5;
}

.navbar__menu-plus-button,
.navbar__menu-minus-button {
  border: none;
  background-color: transparent;
}

.navbar__menu-plus-svg,
.navbar__menu-minus-svg {
  width: 20px;
  height: 20px;
}

.navbar__menu-minus-svg {
  display: none;
}

@media (min-width: 425px) {
  /* .navbar__menu-list {
    top: 60px;
  } */
}

@media (min-width: 768px) {
  /* .navbar__menu-list {
    top: 235px;
  } */
}

@media (min-width: 1024px) {
  .menuLink {
    display: none;
  }

  .navbar__menu-list {
    position: static;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border: none;
    margin: 1em 0;
  }

  .navbar__menu-list-item {
    padding: 0 20px;
    position: relative;
  }

  .navbar__menu-svg-container {
    display: none;
  }

  .navbar__sub-menu-list::before {
    left: 25px;
  }

  ul.navbar__menu-list li ul {
    position: absolute;
    top: 70px;
    /* width: 90px; */
    border-top: 3px solid #1b75d5;
    left: 0;
    padding: 10px;
    font-size: 0.875rem;
  }

  ul.navbar__menu-list li ul::before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    top: -10px;
    left: 23px;
    margin-left: -10px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #1b75d5 transparent;
  }

  .navbar__sub-menu-list-item {
    width: 100%;
  }

  .navbar__sub-menu-list-item-link {
    border: none;
    padding: 2px 0;
  }
}

@media (min-width: 1440px) {
  .mainNav {
    display: flex;
  }
}

@media (min-width: 1920px) {
  .navbar__menu-list {
    width: 85%;
    justify-content: flex-end;
    font-size: 1.125rem;
    margin: 0 10px 0 0;
  }

  .navbar__menu-list-item {
    padding: 0 25px;
  }

  ul.navbar__menu-list li ul {
    top: 59px;
    width: auto;
    left: 10px;
    padding: 14px 8px;
    font-size: 1rem;
  }

  .navbar__sub-menu-list-item-link {
    padding: 4px 2px;
  }
}

Answer 1

I've just reviewed your code but in a quick example it seems to work. It displays the "+" and "-" symbol as you want, I think. But in case that was a matter of simplicity I've let you a quick example with a simplificated aproach. If its not what you need, please try to be more specific.

 const triggerBTN = document.getElementById('menu-trigger'); const menu = document.getElementById('menu'); const submenuParent = document.getElementsByClassName('menu-navigation-hassubmenu'); triggerBTN.addEventListener('click', function() { menu.classList.toggle('open'); }); for (let i = 0; i < submenuParent.length; i++) { submenuParent[i].addEventListener('click', function(i) { this.classList.toggle('submenu-visible'); }); }

 .btn { display: inline-block; border: 1px solid black; padding: 15px; cursor: pointer; }.btn:hover { color: white; background: black; } #menu { display: none; } #menu.open { display: block; } #menu.menu-navigation { padding: 10px; } #menu.menu-navigation li { list-style: none; margin-bottom: 10px; } #menu.menu-navigation li.menu-navigation-hassubmenu { position: relative; } #menu.menu-navigation li.menu-navigation-hassubmenu::before { content: "+"; position: absolute; width: 15px; height: 15px; top: 5px; right: 0; color: black; font-size: 1.5rem; font-weight: bold; } #menu.menu-navigation li.menu-navigation-hassubmenu ul { display: none; } /* SUBMENU VISIBLE */ #menu.menu-navigation li.menu-navigation-hassubmenu.submenu-visible::before { content: "-"; } #menu.menu-navigation li.menu-navigation-hassubmenu.submenu-visible ul { display: block; }

 <div id="menu-trigger" class="btn"> MENU TRIGGER </div> <div id="menu"> <nav class="menu-navigation"> <li> <a href="">SIMPLE LINK</a> </li> <li class="menu-navigation-hassubmenu"> <span>DROPDOWN ANCHOR</span> <ul> <li><a href="">INNER SIMPLE LINK</a></li> <li><a href="">INNER SIMPLE LINK</a></li> <li><a href="">INNER SIMPLE LINK</a></li> </ul> </li> <li class="menu-navigation-hassubmenu"> <span>DROPDOWN ANCHOR</span> <ul> <li><a href="">INNER SIMPLE LINK</a></li> <li><a href="">INNER SIMPLE LINK</a></li> <li><a href="">INNER SIMPLE LINK</a></li> </ul> </li> </nav> </div>