Drop-down opening all sub-menus, no matter what option I click-CodePudding

I'm trying to dynamically open drop-down sub-menus depending on what option is clicked.

For example, if A is clicked, I want A.1 to appear. If B is clicked, I want B.1 to appear. And so on and so forth. But instead, when I click A for example, it opens A.1 and B.1. I'd like to do this dynamically with a for-loop or something. I don't really want to change any of my HTML. It seems like I'm really close in my JavaScript, I'm just not sure what I'm missing.

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

function subMenu() {
  for (var i = 1; i <= 2; i  ) {
      document.getElementById("subMenu"   i).classList.toggle("show");
    
  }
}

/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sub-menu-item{
  display: none;
  background-color: #ccc;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

.sub-menu-item a:hover {background-color: #bbb}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<div >
  <button onclick="mainDropDown()" >Dropdown</button>
  <div id="myDropdown" >
    <a href="#" onclick="subMenu()">A</a>
    <div  id="subMenu1">
    <a href="#">A.1</a>
    </div>
    <a href="#" onclick="subMenu()">B</a>
    <div  id="subMenu2">
    <a href="#">B.1</a>
    </div>
    <a href="#">C</a>
    <a href="#">D</a>
    <a href="#">E</a>
    <a href="#">F</a>
    <a href="#">G</a>
  </div>
</div>

CodePudding user response：

Right now your subMenu function opens all submenus.

To avoid this, you can pass the element that was clicked on to the click handler. Then, your subMenu can receive this element, find out what the next element is, and apply the class to that item.

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

function subMenu(clickedElement) {
  let appropriateSubmenu = clickedElement.nextElementSibling;
  appropriateSubmenu.classList.toggle("show");
}

/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sub-menu-item{
  display: none;
  background-color: #ccc;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

.sub-menu-item a:hover {background-color: #bbb}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<div >
  <button onclick="mainDropDown()" >Dropdown</button>
  <div id="myDropdown" >
    <a href="#" onclick="subMenu(this)">A</a>
    <div  id="subMenu1">
    <a href="#">A.1</a>
    </div>
    <a href="#" onclick="subMenu(this)">B</a>
    <div  id="subMenu2">
    <a href="#">B.1</a>
    </div>
    <a href="#">C</a>
    <a href="#">D</a>
    <a href="#">E</a>
    <a href="#">F</a>
    <a href="#">G</a>
  </div>
</div>

CodePudding user response：

you mean like this? what do you mean by B.1 and B.2?

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

function subMenu(n) {
  document.getElementById("subMenu"   n).classList.toggle("show");  
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sub-menu-item{
  display: none;
  background-color: #ccc;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

.sub-menu-item a:hover {background-color: #bbb}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<div >
  <button onclick="mainDropDown()" >Dropdown</button>
  <div id="myDropdown" >
    <a href="#" onclick="subMenu(1)">A</a>
    <div  id="subMenu1">
    <a href="#">A.1</a>
    </div>
    <a href="#" onclick="subMenu(2)">B</a>
    <div  id="subMenu2">
    <a href="#">B.1</a>
    </div>
    <a href="#">C</a>
    <a href="#">D</a>
    <a href="#">E</a>
    <a href="#">F</a>
    <a href="#">G</a>
  </div>
</div>