Display & Hide a Navbar submenu-CodePudding

I'm trying to make a navbar with a submenu for each link. The easiest way to do this that I found is to write some Javascript that when the link is clicked changes the classes of the submenu (from display none to display block). I tried to write the script but it doesn't work at all. I can't find out where the problem is.

const SM_prossimieventi = () => {
  const sottomenu = document.querySelector('.prossimieventi_items');
  const linkpe = document.querySelector('.prossimieventi_a');
  linkpe.addEventListener('click', () => {
    sottomenu.classList.toggle('.pe-active');
  });
};

SM_prossimieventi();

        <nav >
            <ul >
                <li > <a href="" >HOME</a></li>
                <li > <a href="" >PROSSIMI EVENTI</a></a>
                    <ul >
                        <li ><a href="">GIORNATA ECOLOGICA</a></li>
                        <li ><a href="">CONCORSO FOTOGRAFICO</a></li>
                        <li ><a href="">LOTTERIA</a></li>
                        <li ><a href="">FESTA ASSUNTA</a></li>
                    </ul>
                </li>

                <li > <a href="" >MAPPA INTERATTIVA</a>
                    <ul >
                        <li ><a href="">COSA VISITARE</a></li>
                        <li ><a href="">DOVE MANGIARE</a></li>
                        <li ><a href="">DOVE DORMIRE</a></li>
                    </ul>
                </li>
                <li > <a href="" >ATTIVITA' SUL
                        TERRITORIO</a> </a>
                    <ul >
                        <li ><a href="">FERRAGOSTO</a></li>
                        <li ><a href="">IL NATALE</a></li>
                        <li ><a href="">PROGETTO AIUOLE</a></li>
                        <li ><a href="">BLOG</a></li>
                        <li ><a href="">DONAZIONI</a></li>
                    </ul>
                </li>
                <li ><a href="" >CHI SIAMO</a></a>
                    <ul >
                        <li ><a href="">LA STORIA</a></li>
                        <li ><a href="">CONTATTACI</a></li>
                        <li ><a href="">BILANCIO</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

.mappainterattiva_items,
.prossimieventi_items,
.attivitàsulterritorio_items,
.chisiamo_items {
  position: absolute;
  list-style: none;
  padding: 1rem;
  margin: 1rem 0rem 0rem 1rem;
  background: #1679a7;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0.1em;
  font-weight: 275;
  width: max-content;
  display: none;
}
.main-nav_item {
  position: relative;
}
.mappainterattiva_item a,
.prossimieventi_item a,
.attivitàsulterritorio_item a,
.chisiamo_item a {
  text-decoration: none;
}
.mappainterattiva_item a:hover,
.prossimieventi_item a:hover,
.attivitàsulterritorio_item a:hover,
.chisiamo_item a:hover {
  text-decoration: none;
  color: #cccc32;
}

.pe-active{
  display: block;
}

CodePudding user response：

Your code have several problems:

First problem could be that you defined SM_prossimieventi function as const. In case you linked your javascript file at the end of your html it won't work. The reason is that const variables (as well as let) are not hoisted, and you will probably get error that this function is not defined. If you are not familiar with concept of hoisting i suggest reading this article: enter link description here

This is how your expandSubmenu function should look something like this:

 function expandSubmenu(event){
event.target.querySelector('ul').classList.toggle('pe-active')

}

Attach exapndSubmenu function to all top-level li elements - like this:

         <li  onclick="expandSubmenu(event)"> PROSSIMI EVENTI
         <ul >
             <li ><a href="">GIORNATA ECOLOGICA</a></li>
             <li ><a href="">CONCORSO FOTOGRAFICO</a></li>
             <li ><a href="">LOTTERIA</a></li>
             <li ><a href="">FESTA ASSUNTA</a></li>
         </ul>
     </li>

Remove tag from top-level li elements, because you are looking for to expand submenu and to go to certain page upon clicking on them
Remove position:absolute from css file and avoid to use to, only in exceptional

CodePudding user response：

It's worth noting that click events bubble. You can set one click event listener on .main-nav_items and then use the Event object to get at the target.

In this way you're only dealing with a single event listener.

Something like this...

const SM_prossimieventi = () => {
  let list = document.querySelector('.main-nav_items');
  list.addEventListener('click', (e) => {
    e.target.nextElementSibling.classList.toggle('pe-active');
  })
}

SM_prossimieventi();