How to change dropdown arrow image with javascript

I am trying to make a dropdown navigation menu where I am using arrow up and down images for the dropdown links. What I want is that when I click on a dropdown link means when I open the submenu, the arrow image should be the arrow-up image and when I close the submenu, it will go back to the arrow-down image. I have more than one dropdown link with the arrow images. The problem is that when I click on one of the dropdown links, the other link with an arrow image also gets triggered and changes. But I only want to change the image of one that I clicked. You can see and check the code below.

const nav__items = document.querySelectorAll(".nav__items");
const nav__list = document.querySelector(".nav__list");

function toggleSubMenu() {
  if (this.classList.contains("nav__list--sub-active")) {

    this.classList.remove("nav__list--sub-active")

  } else if (nav__list.querySelector(".nav__list--sub-active")) {
    nav__list
      .querySelector(".nav__list--sub-active")
      .classList.remove("nav__list--sub-active");

    this.classList.add("nav__list--sub-active");

  } else {
    this.classList.add("nav__list--sub-active");


  }
}


function toggleArrowUpDown() {
  if (this.classList.contains("nav__list--sub-active")) {
    document.querySelectorAll('.arrow_down').forEach((arrow) => {
      arrow.src = "https://i.postimg.cc/Bb4ttXfk/arrow-up.png"
    })
  } else {
    document.querySelectorAll('.arrow_down').forEach((arrow) => {
      arrow.src = "https://i.postimg.cc/Hn9ctbtT/arrow-down.png"
    })
  }

}

for (let item of nav__items) {
  if (item.querySelector(".nav__list--sub")) {
    item.addEventListener('click', toggleSubMenu, false);
    item.addEventListener('click', toggleArrowUpDown, false);
  }
}
* {
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

.nav__list {
  margin: 0;
  padding: 0;
}

.nav__items {
  padding-bottom: 2em;
}

.nav__list--sub {
  display: none;
}

.nav__list--sub-active .nav__list--sub {
  display: block;
}
<nav class="nav">
  <div class="container">
    <ul class="nav__list">
      <li class="nav__items">
        <a href="#">Home</a>
      </li>
      <li class="nav__items has-submenu">
        <a tabindex="0">About <img src="https://i.postimg.cc/Hn9ctbtT/arrow-down.png" class="arrow_down" alt=""
          /></a>
        <ul class="nav__list--sub">
          <li class="nav__items--sub sub-item">
            <a href="#">Public Engagement
               </a>
            <ul class="nav__list--sub-sub">
              <li><a href="#">Cultural Map</a></li>
              <li><a href="#">Child Culture</a></li>
              <li><a href="#">Initiatives</a></li>
              <li><a href="#">Membership</a></li>
            </ul>
          </li>
          <li class="nav__items--sub"><a href="#">Events</a></li>
          <li class="nav__items--sub">
            <a href="#">Publications</a>
          </li>
        </ul>
      </li>
      <li class="nav__items has-submenu">
        <a tabindex="0">Programs & Initiatives <img src="https://i.postimg.cc/Hn9ctbtT/arrow-down.png" class="arrow_down" alt=""
          /></a>
        <ul class="nav__list--sub">
          <li class="nav__items--sub sub-item">
            <a href="#">Public Engagement
                </a>
          </li>
          <li class="nav__items--sub sub-item">
            <a href="#">Events
                </a>

          </li>
          <li class="nav__items--sub">
            <a href="#">Publications</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Answer

Instead of document.querySelectorAll in your toggleArrowUpDown() method, change that to this.querySelectorAll so you’re only querying on this instead of the entire document.

But you can also take this one step further and use CSS classes to manage the display, so you only need to toggle the class.

const nav__items = document.querySelectorAll(".nav__items");
const nav__list = document.querySelector(".nav__list");

function toggleSubMenu() {
  if (this.classList.contains("nav__list--sub-active")) {

    this.classList.remove("nav__list--sub-active")

  } else if (nav__list.querySelector(".nav__list--sub-active")) {
    nav__list
      .querySelector(".nav__list--sub-active")
      .classList.remove("nav__list--sub-active");

    this.classList.add("nav__list--sub-active");

  } else {
    this.classList.add("nav__list--sub-active");


  }
}


function toggleArrowUpDown() {
  let spanClasses = this.querySelector('span').classList;
  
  if (this.classList.contains("nav__list--sub-active")) {
    spanClasses.remove('arrow_down');
    spanClasses.add('arrow_up');
  } else {
    spanClasses.remove('arrow_up');
    spanClasses.add('arrow_down');
  }

}

for (let item of nav__items) {
  if (item.querySelector(".nav__list--sub")) {
    item.addEventListener('click', toggleSubMenu, false);
    item.addEventListener('click', toggleArrowUpDown, false);
  }
}
* {
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

.nav__list {
  margin: 0;
  padding: 0;
}

.nav__items {
  padding-bottom: 2em;
}

.nav__list--sub {
  display: none;
}

.nav__list--sub-active .nav__list--sub {
  display: block;
}

.arrow_down {
  background-image: url('https://i.postimg.cc/Hn9ctbtT/arrow-down.png');
  width: 12px;
  height: 9px;
  display: inline-block;
  background-repeat: no-repeat;
}

.arrow_up {
  background-image: url('https://i.postimg.cc/Bb4ttXfk/arrow-up.png');
  width: 12px;
  height: 9px;
  display: inline-block;
  background-repeat: no-repeat;
}
<nav class="nav">
  <div class="container">
    <ul class="nav__list">
      <li class="nav__items">
        <a href="#">Home</a>
      </li>
      <li class="nav__items has-submenu">
        <a tabindex="0">About <span class="arrow_down" alt=""
          ></span></a>
        <ul class="nav__list--sub">
          <li class="nav__items--sub sub-item">
            <a href="#">Public Engagement
               </a>
            <ul class="nav__list--sub-sub">
              <li><a href="#">Cultural Map</a></li>
              <li><a href="#">Child Culture</a></li>
              <li><a href="#">Initiatives</a></li>
              <li><a href="#">Membership</a></li>
            </ul>
          </li>
          <li class="nav__items--sub"><a href="#">Events</a></li>
          <li class="nav__items--sub">
            <a href="#">Publications</a>
          </li>
        </ul>
      </li>
      <li class="nav__items has-submenu">
        <a tabindex="0">Programs & Initiatives <span class="arrow_down" alt=""
          ></span></a>
        <ul class="nav__list--sub">
          <li class="nav__items--sub sub-item">
            <a href="#">Public Engagement
                </a>
          </li>
          <li class="nav__items--sub sub-item">
            <a href="#">Events
                </a>

          </li>
          <li class="nav__items--sub">
            <a href="#">Publications</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>