通过单击另一个元素将类切换到元素

Question

我想点击一个元素来切换一个完全不相关的元素（不是孩子，父母或兄弟）上被引用的类

例如，最初代码看起来像这样

<a id="button">Button</a>

<div class="navigation">
Foo
</div>

当用户点击ID为button的元素时，HTML会更改为这样（类＆＃34;打开＆＃34;在元素上引用＆＃34;导航＆＃34;已经引用＆＃34;：

<a id="button">Button</a>

<div class="navigation open">
Foo
</div>

用户应该可以通过点击ID为button的元素来切换课程。

我想使用纯JavaScript来实现这种效果。

Answer 1

您可以将click事件附加到标识为button的按钮，然后单击使用navigation选择包含类getElementsByClassName()的元素（ti将返回节点列表），然后使用[0]选择第一个，然后使用toggle()：

document.getElementById('button').onclick = function(){
     document.getElementsByClassName('navigation')[0].classList.toggle("open");
} 

希望这有帮助。

document.getElementById('button').onclick = function(){
  document.getElementsByClassName('navigation')[0].classList.toggle("open");
}

.open{
  background-color: green;
  color: white;
}

<a id="button">Button</a>

<div class="navigation">
Foo
</div>

Answer 2

您需要添加事件处理程序。这可以通过在onClick对象上简单设置Element属性来完成：

document.getElementById('button').onClick = function onClick() {
  document.getElementsByClassName('navigation')[0].className += 'open';
};

但是，您最好使用addEventListener，以便可以将多个事件侦听器添加到同一元素中：

document.getElementById('button').addEventListener('click', function onClick() {
  document.getElementsByClassName('navigation')[0].className += 'open';
}, false);

编辑：最好将元素引用缓存在变量中，如下所示：

var button = document.getElementById('button');
var nav = document.getElementsByClassName('navigation')[0];

button.addEventListener('click', function onClick() {
  nav.className += 'open';
}, false);

EDIT2：与Zakaria的答案一样，您可能希望使用classList.add(x)代替className += x。它更符合jQuery的工作方式。但请注意，旧版本的IE不支持classList。

EDIT3：这是使用classList.toggle

的最终版本

var button = document.getElementById('button');
var nav = document.getElementsByClassName('navigation')[0];

button.addEventListener('click', function onClick() {
  nav.classList.toggle('open');
}, false);

以下使用classList快速替换className：

function classList(elem) {
  var cl = {
    add: function (clas) { 
      elem.className += clas; 
    },
    remove: function (clas) { 
      elem.className = elem.className.replace(clas, ''); 
    },
    toggle: function (clas) {
      if (elem.className.indexOf(clas) > -1) {
        cl.remove(clas);
      } else {
        cl.add(clas);
      }
    }
  };
  return cl;
}

// usage
classList(nav).add('open');
classList(nav).toggle('open');

Answer 3

你真的不需要javascript。复选框在存储开/关状态时非常有用。你只需要使用CSS在其他地方使用它就有点狡猾。这是一个例子：

＆＃13;

＆＃13;

label.divcheck { color:blue; text-decoration:underline; }
input.divcheck { display:none; }

input.divcheck + div { display:none; }
input.divcheck:checked + div { display:block;}

＆＃13;

<label class="divcheck" for="navigation">Button Nav</label>
<label class="divcheck" for="other">Button Other</label>

<input type="checkbox" class="divcheck" id="navigation"/>
<div class="navigation">
Foo
</div>

<input type="checkbox" class="divcheck" id="other"/>
<div class="navigation">
Other
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这个：

document.querySelector('div.navigation').classList.toggle('open');

如果您只有一个具有类导航的div元素，这将有效。给它一个id会更好，比如id = navigation

Answer 5

具有类navigation

的多个元素

navigation是一个类，所以我假设您想要在点击标识为open的元素上提供课程button时有多个元素。这样做：

function toggleNavigation(element) {
  element.classList.toggle('open');
}

document.getElementById('button').addEventListener('click', function() {
  Array.from(document.getElementsByClassName('navigation')).forEach(toggleNavigation);
});

.navigation {
  background-color: lightgreen;
}
.navigation.open {
  background-color: lightblue;
}

<a id="button">Button</a>

<div class="navigation">Foo</div>
<div class="navigation">Foo</div>
<div class="navigation">Foo</div>

具有类或标识navigation

的单个元素

如果不是这样（即，只有一个元素具有类navigation，在这种情况下它应该是一个id，而不是一个类）你可以将上面的JavaScript替换为：

document.getElementById('button').addEventListener('click', function() {
  document.getElementsByClassName('navigation')[0].classList.toggle('open');
});

或者如果您将navigation更改为ID：

document.getElementById('button').addEventListener('click', function() {
  document.getElementById('navigation').classList.toggle('open');
});