Question

更具体地说，我有一个div，里面有一个图标。我希望它是这样当你点击div时导航中的类改变但我是javascript的新手所以我不知道如何设置javascript但它可能工作。互联网让我感到困惑，所有的答案都是在同一个div /元素中改变类。

这是我的HTML代码：

<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>

这是我的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

这就是你想要的。而且它是纯粹的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

使用document.getElementById('navdrop')而非 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>

单击按钮时更改元素的类

2 个答案: