Javascript:void(0) is conflicting with an onclick event

1

I am having trouble with this page that I am developing http://www.handig.dk/test/index.html

When navigating through this page on your mobile phone, you need to be able to click on the menu items (The one called “menukort” on my page) in order to activate the dropdown menu.
I used a standard onclick procedure for this.

     <li id="toggledrop" onclick="myFunction()"> <a href="javascript:void(0)">Menukort</a>
       <ul class="nav-dropdown">
         <li><a href="#frokost">Frokost</a></li>
         <li><a href="#aften">Aften</a></li>
         <li><a href="#drikke">Drikkevarer</a></li>
       </ul>
     </li>

function myFunction() {
  document.getElementsByClassName("nav-dropdown").classList.toggle("show");
}

The problem is that, as you can see, I am also using javascript:void(0). I am doing this because if I don’t add this to the link for the dropdown menu, I will be taken back to the first section of the page if I click on it.
But this also means that as soon as I open the dropdown menu with onlick, it will close itself after a second.

Is there a way I can get these two to work together somehow?

2

Don’t have the anchor element, it’s not doing anything, just remove it, use a span or something for styling, it isn’t a link

1 Like
3

Thanks man.
You are awesome =)