在没有jQuery的情况下切换HTML元素上的类

Question

我的网站上有一个部分包含所有内容,但我想要一个带有隐藏内容的"侧边栏",可以通过外部按钮从左侧平滑显示.

CSS转换可以处理平滑性没问题,jQuery toggle()可以在类之间切换,将隐藏的div移入和移出屏幕.

如何在不使用jQuery的情况下获得相同的效果？

Answer 1

您只能通过CSS3实现它:

<label for="showblock">Show Block</label>
<input type="checkbox" id="showblock" />

<div id="block">
    Hello World
</div>

而CSS部分:

#block {
    background: yellow;
    height: 0;
    overflow: hidden;
    transition: height 300ms linear;
}

label {
    cursor: pointer;
}

#showblock {
    display: none;
}

#showblock:checked + #block {
    height: 40px;
}

该魔术是隐藏的checkbox和:checked在CSS选择器.

工作jsFiddle演示.

Answer 2

如果您乐意只支持更多现代浏览器,可以使用classList.toggle()函数切换类:

var element = document.getElementById('sidebar');
var trigger = document.getElementById('js-toggle-sidebar'); // or whatever triggers the toggle

trigger.addEventListener('click', function(e) {
    e.preventDefault();
    element.classList.toggle('sidebar-active'); // or whatever your active class is
});

这应该做你需要的一切 - 如果你有多个触发器,我建议使用document.querySelectorAll(selector).

希望有所帮助

Answer 3

仅 HTML

您可以使用<summary>。以下代码没有任何依赖性。根本没有 JavaScript、CSS，只有 HTML。

<div class="bd-example">
  <details open="">
    <summary>Some details</summary>
    <p>More info about the details.</p>
  </details>

  <details>
    <summary>Even more details</summary>
    <p>Here are even more details about the details.</p>
  </details>
</div>

更多详细信息，请参阅MDN 官方文档。

Answer 4

你可以通过javascript获取任何元素(没有jquery),并且类是一个属性:element.className所以将它作为一个函数:

更新: 因为这变得有点流行,我更新了功能,使其更好.

function toggleClass(element, toggleClass){
   var currentClass = element.className;
   var newClass;
   if(currentClass.split(" ").indexOf(toggleClass) > -1){ //has class
      newClass = currentClass.replace(new RegExp('\\b'+toggleClass+'\\b','g'),"")
   }else{
      newClass = currentClass + " " + toggleClass;
   }
   element.className = newClass.trim();
}