使用JavaScript，HTML和CSS的下拉菜单

Question

I can't seem to get this to work. I don't wanna put jQuery in yet. Just doing plain javascript. When I click on the image nothing happens. I need it to dropdown the navigation when I click the image. Edited my Javascript code. I added alert to show the current status of what class the toggle is using. But still I cant get to change it from header_navigation_mobile to header_navigation_mobile.is_open

This is my HTML CODE for the Clickable Image

<a href="#" onclick="toggleMenu()">
    <img class="mobile_navigation_button" src="{{site.baseurl}}/assets/img/menu.svg"/>
</a>

This is the HTML for the drop down navigation

<div class="header_navigation_mobile">
   <ul>
        <li><a href="{{site.baseurl}}/index.html">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#"> </a></li>
        <li><a href="#"> </a></li>
   </ul>
</div>

Then my CSS For the Clickable Image to show the navigation

.header_navigation_mobile.is_open{
    display: block;
    transform: translateY(0%);
}   

This is the CSS for the Clickable Image first state which is to Hide it

.header_navigation_mobile{
    display: none;
    position: absolute;
    width: 290px;
    background: #484547;
    transform: translateY(-100%);
    transition: all 0.3s ease-in-out;
}

Then finally my Javascript

function toggleMenu(){
var mobileNav = document.getElementById('mobile_Nav');
var mobileNav_toggle = mobileNav.getAttribute("class");

if(mobileNav_toggle == "header_navigation_mobile") {
    mobileNav_toggle == "header_navigation_mobile.is_open";
}
else {
    mobileNav_toggle == "header_navigation_mobile";
}

alert(mobileNav_toggle);
}

Answer 1

In your JS try like this.use querySelector for selecting elements.And for setting and getting css properties use selector.style.property_name .

function toggleMenu(){
    var mobileNav_Hide = document.querySelector('.header_navigation_mobile');
    var mobileNav_Show = document.querySelector('.header_navigation_mobile.is_open')
    if(mobileNav_Hide.style.display == "none"){
        mobileNav_Show.stylr.display == "block";
    }
    else{
        mobileNav.style.display = "none";
    }
}

Answer 2

I would give the menu an ID so it's easier to target, then just toggle a class that you use to hide/show the menu.

 .header_navigation_mobile { display: none; } .open { display: block; } 

 <a href="#" onclick="toggleMenu()">toggle</a> <div class="header_navigation_mobile" id="mobilenav"> <ul> <li><a href="{{site.baseurl}}/index.html">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> <li> <a href="#"> </a> </li> <li> <a href="#"> </a> </li> </ul> </div> <script> function toggleMenu(){ var nav = document.getElementById('mobilenav'); nav.classList.toggle('open'); } </script> 

Answer 3

I know this is not a specific answer to your question but may be a handy solution as well. I put together a jsfiddle of a hidden menu you can easily edit to your needs. Here is the link.

 #Btn{ position: fixed; right: 20px; width: 20px; height: 24px; background: linear-gradient(#FFF,#DDD); border: #AAA 1px solid; border-radius: 2px; padding: 2px 5px; cursor: pointer; transition: border 0.3s linear 0s; } #Btn:hover{ border: #06F 1px solid; } #Btn:hover div{ background: #06F; } #Btn > div{ width: 20px; height: 4px; background: #333; margin: 3px 0px; border-radius: 4px; transition: background 0.3s linear 0s; } #hidden{ position: fixed; right: -300px; top: 60px; width: 260px; height: 0px; background: #333; color:#ededed; padding:15px; transition: right 0.3s linear 0s; } 

 <script> function toggleBTN(){ var hidden = document.getElementById("hidden"); hidden.style.height = window.innerHeight - 60+"px"; if(hidden.style.right == "0px"){ hidden.style.right = "-300px"; } else { hidden.style.right = "0px"; } } </script> <div id="Btn" onclick="toggleBTN()"> <div></div> <div></div> <div></div> </div> <div id="hidden"> <ul> <li>MENU ITEM 1</li> <li>MENU ITEM 2</li> <li>MENU ITEM 3</li> </ul> </div> <div id="page_content"> <script> for(var i = 0; i < 10; i++){ document.write("<h2>"+(i+1)+". Dummy page content ... </h2>"); } </script> </div> 

Hope this helps :)

Answer 4

There are a few things in the else statement where is mobileNav coming from there is no instance of that anywhere in your code. Taking a step back a minute from your solution does the adding and removal of the classname is_open define the entire show hide behaviour you desire?

Your process of getting the same element with the subclass present/not present and then trying to set the display property is confusing.

You have an equality comparer when setting the display property when it should be just a single equals which along with my first statement i think is your main problem.

Instead of the way you are doing it i would just look at toggling the is_open class this link Toggle class on HTML element without jQuery shows how to do that and also demonstrates a few other ways of toggling styles including without javascript

Finally just check because im being lazy that display is valid as a property and that it shouldnt instead be style.display as others have indicated

Answer 5

js
let c = document.getElementById("dropdownlist");
      let e = document.getElementById("dropdownicon");
      let d = e.classList.toggle('fa-angle-down');
      if(d===true) {
        if(c.style.display==='none'){
          c.style.display = 'block';
        }
        else{
          c.style.display ='block';
        }
      }
      else{
        c.style.display = 'none';
      }