Home>

I want to open the menu with display: none when I click div (spmenu-inner-bottom-flex).

No change is seen.

Corresponding source code
<ul>
 <li>
     
        Products 
     <span></span>
     
   <ul>
    <li>Product list</li>
    <li>List of nutritional components</li>
    <li>New product information</li>
   </ul>
 </li>
 <li>
     
        Campaign Entertainment 
     <span></span>
     
   <ul>
    <li>Campaign Entertainment Top</li>
    <li>Campaign list</li>
    <li>Use points</li>
    <li>Advantageous coupons</li>
   </ul>
 </li>
</ul>
.spmenu-inner-bottom-flex {
  color: #fff;
  font-size: 20px;
  margin-bottom: 20px;
}
.spmenu-inner-bottom-flex {
  display: flex;
  justify-content: space-between;
}
.spmenu-inner-bottom span {
  display: inline-block;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: gray;
  margin-top: 10px;
}
.spmenu-inner-bottom ul li a {
  display: inline-block;
  font-size: 18px;
  padding-left: 30px;
  margin-bottom: 20px;
  color: # f9f57c;
}
.spmenu-inner-bottom ul {
  display: none;
}
.spmenu-inner-bottom ul.active {
  display: block;
}
const parentMenu = document.getElementsByClassName ("spmenu-inner-bottom-flex");
  const childMenu = document.querySelector (".spmenu-inner-bottom>ul");
    parentMenu.addEventListener ("click", () =>{
      childMenu.classList.toggle ("active");
    });
What I tried

I'm trying to create a mechanism to open and close the hidden ul by giving and removing the class name active in Javascript, but it seems that there is a code error and it is not reflected.
I'm new to JavaScript and I managed to write the code, but I don't know what's wrong.
I would appreciate any advice.

  • Answer # 1

    .spmenu-inner-bottom>ul: not (.active) {
    display: none;
    }
    window.addEventListener ('DOMContentLoaded', () =>{
      const parentMenu = document.querySelectorAll (".spmenu-inner-bottom-flex");
      parentMenu.forEach (x =>{
        x.addEventListener ("click", () =>{
          x.nextElementSibling.classList.toggle ("active");
        });
      });
    });

Related articles