Добавьте Javascript к кнопке со стрелкой вниз, чтобы открыть и закрыть подменю

Question

Я пытался часами с помощью этой javascript навигации, я исследовал многие сайты, включая w3schools, codepen и css трюки, и многие другие, я часами читал через стек и все очень помог, теперь я почти закончил, и мне нужна некоторая помощь, чтобы это меню работало.

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

В меню есть две ссылки: Форум 1 / КНОПКА СТРЕЛКА вниз и Форум 2 / КНОПКА СТРЕЛКА вниз

Я могу получить КНОПКУ СТРАНИЦА 1 вниз иногда открывать субнавигатор, нажимая КНОПКУ СТРЕЛКИ вниз, но я не могу получить КНОПКУ СТРЕЛКИ 2 на Форуме, чтобы вообще вызвать суб-навигацию.

Я не уверен, так ли это, как у меня css, или что.

Я предоставляю полное меню с css, html и javascript,

Как я уже сказал, я могу получить первую КНОПКУ СТРЕЛКИ, чтобы открыть суб-навигацию иногда, но это об этом. Можете ли вы помочь мне получить эту работу, пожалуйста?

Вот стиль для меню навигации

 body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #18143c; 
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 7px 14px 16px;
  text-decoration: none;
}

.subnav {
  float: left;
  overflow: auto;
}

.subnav .subnavbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 5px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  margin-right:26px;
}

.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: #46485c;
}

.subnav-content-1 {
 display: none;
  position: absolute;
  left: 0;
  background-color: #46485c;
  width: 100%;
  z-index: 1;
  overflow:auto;
}

.subnav-content-1 a {
  float: left;
  color: white;
  text-decoration: none;
  padding: 10px 10px;
}

.subnav-content-1 a:hover {
  background-color: #eee;
  color: black;
}

.show {display: block;}

Вот HTML для меню навигации

<div class="navbar">
    <a href="#home"style="padding-left:6px;">Forums 1</a>
  <div class="subnav">
  <button onclick="myFunction()" class="subnavbtn"><i class="fa fa-caret-down"></i></button>
     <div id="myDropdown" class="subnav-content-1">
      <a href="#"style="margin-left:16px;">Test Main</a>
      <a href="#">Test link 1</a>
      <a href="#">Test link 1</a>
       <a href="#">Test link 1</a>
    </div>
  </div> 
    <a href="#home"style="padding-left:6px;">Forums 2</a>
  <div class="subnav">
  <button onclick="myFunction()" class="subnavbtn"><i class="fa fa-caret-down"></i></button>
     <div id="myDropdown" class="subnav-content-1">
      <a href="#"style="margin-left:16px;">Test Main</a>
      <a href="#">Test link 2</a>
      <a href="#">Test link 2</a>
       <a href="#">Test link 2</a>
    </div>
  </div> 
</div>

А вот javascript

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.subnavbtn')) {
    var dropdowns = document.getElementsByClassName("subnav-content-1");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

здесь есть ссылка на страницу в W3schools, где я работал над этим меню. https://www.w3schools.com/code/tryit.asp?filename=GC3LUF0TLS6S

Я пытаюсь сделать так, чтобы меню работало, когда вы щелкаете по раскрывающейся кнопке со стрелкой, она открывает меню вспомогательной навигации, затем закрывает вспомогательную навигацию, Вы просто нажимаете в любом месте на странице.

Это почти работает !! Пожалуйста, помогите мне заставить его работать правильно.

Answer 1

Привет, мужик. Я нашел для тебя исправление, я не знаю, если это то, что тебе нужно, но он выполняет эту работу:

Сначала измените идентификаторы для каждого выпадающего списка, так как они конфликтуют, когда js вызывается, затем вызывается эта js функция с номером id каждого выпадающего списка:

<div class="navbar">
    <a href="#home"style="padding-left:6px;">Forums 1</a>
  <div class="subnav">
  <button onclick="**myFunction(1)**" class="subnavbtn"><i class="fa fa-caret-down"></i></button>
     <div id="**myDropdown1**" class="subnav-content-1">
      <a href="#"style="margin-left:16px;">Test Main</a>
      <a href="#">Test link 1</a>
      <a href="#">Test link 1</a>
       <a href="#">Test link 1</a>
    </div>
  </div> 
    <a href="#home"style="padding-left:6px;">Forums 2</a>
  <div class="subnav">
  <button onclick="**myFunction(2)**" class="subnavbtn"><i class="fa fa-caret-down"></i></button>
     <div id="**myDropdown2**" class="subnav-content-1">
      <a href="#"style="margin-left:16px;">Test Main</a>
      <a href="#">Test link 2</a>
      <a href="#">Test link 2</a>
       <a href="#">Test link 2</a>
    </div>
  </div> 
</div>

Затем вам нужно добавить параметр к вашей функции js, чтобы узнать, какое выпадающее меню переключать:

function myFunction(n) {    
    document.getElementById("myDropdown"+n).classList.toggle("show");
}