单击按钮时更改元素的类

Question

To be more specific, i have an div which has an icon in it. I want it to be so when you click on the div the class in a nav changes but i'm new to javascript so i dont know how to set the javascript to however it might work. And internet got me too confused and all of the answers were for changing the class in the same div/element.

Here's my html code:

<div class="nav-container">
            <nav id="navdrop" class="top-bar">

!-- Code in between --!

    <div id="mobileNav" class="mobile-toggle">
      <i class="icon icon_menu"></i>
    </div>

Here's my Javascript:

document.getElementById('mobileNav').onclick = function(){
    var className = '' + navdrop.className + '';
    if ( ~className.indexOf('open-nav') ) {
        this.className = className.replace(' open-nav', '');
    } else {
        this.className += ' open-nav';
    }
}

Answer 1

This is what you want. Moreover it's in pure Javascript

 function classToggle() { document.querySelector('#navdrop').classList.toggle('class1'); document.querySelector('#navdrop').classList.toggle('class2'); } document.querySelector('#div').addEventListener('click', classToggle); 

 .class1 { border: solid 1px; } .class2 { border: 0; } 

 <nav id="navdrop" class="class2"> <a href="#">HTML</a> | <a href="#">CSS</a> | <a href="#">JavaScript</a> | <a href="#">jQuery</a> </nav> <br/> <div id="div" >click here</div> 

Answer 2

Use document.getElementById('navdrop') instead of just navdrop

 document.getElementById('mobileNav').onclick = function(){ var className = '' + document.getElementById('navdrop').className + ''; if ( className.indexOf('open-nav') > -1 ) { document.getElementById('navdrop').className = className.replace('open-nav', ' '); } else { document.getElementById('navdrop').className += ' open-nav'; } } 

 .open-nav{ color : red } 

 <div class="nav-container"> <nav id="navdrop" class="top-bar"> Nav </nav> <div id="mobileNav" class="mobile-toggle"> Test <i class="icon icon_menu"></i> </div>