Javascript 在不带jQuery的HTML元素上切换类

我在我的网站上有一个包含所有内容的部分，但我希望一个带有隐藏内容的“侧边栏”能够在按下外部按钮时从左侧平滑地显示出来

CSS转换可以处理平滑度没有问题，jQuery

toggle（）

可以在类之间切换，将隐藏的div移入和移出屏幕

---

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

您可以使用以下函数切换类：

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
});

---

这应该可以满足您的所有需要-如果您有多个触发器，我建议您改用。

您可以使用javascript（无jquery）按id获取任何元素，并且类是一个属性： element.className 因此，将其作为一个函数：

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
});

更新： 由于这是一个有点流行，我更新了功能，使其更好

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();
}

---

您只能通过CSS3实现它：

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

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

魔术是CSS中隐藏的

复选框

和

：选中的

选择器

.

函数init（）{
animateCSS（document.getElementById（“幻灯片”），250{
左：功能（时间百分比，帧）{
var端点=128，
起始点=0，
路径长度=端点-起点，
base=64，//曲线的斜率
currentPos=数学楼层（起始点+（数学功率（基准，时间百分比）-1）/（基准-1）*路径长度）；
返回电流pos+“px”；
}
}，功能（元素）{
element.style.left=“128px”；
});
};
var JobType=函数（）{
如果（！（作业类型的此实例））{
返回新的作业类型（参数[0]）；
};
var arg=参数[0]；
this.fn=arg[“fn”]；
this.delay=arg[“delay”]；
this.startTime=arg[“startTime”]；
this.comment=arg[“comment”]；
这个值=0；
};
函数JobManager（）{
如果（！（作业管理器的此实例））{
返回新的JobManager（）；
};
var实例；
作业管理器=函数（）{
返回实例；
};
JobManager.prototype=this；
实例=新作业管理器（）；
instance.constructor=JobManager；
var jobQueue=[]；
var startedFlag=false；
var-inProcess=false；
var currentJob=null；
var-timerID=-1；
var start=函数（）{
if（jobQueue.length）{
startedFlag=true；
currentJob=jobQueue.shift（）；
var startOver=currentJob.delay-（（新日期（））.getTime（）-currentJob.startTime）；
timerID=setTimeout（函数（）{
inProcess=true；
currentJob.fn（）；
if（jobQueue.length）{
试一试{
而（（jobQueue[0].delay-（（new Date（））.getTime（）-currentJob.startTime））0？startOver:0））；
}
否则{
startedFlag=false；
timerID=-1；
};
};
instance.add=函数（newJob）{
if（作业类型的新作业实例）{
停止电流（）；
var jobQueueLength=jobQueue.length；
如果（！jobQueueLength）{
jobQueue.push（newJob）；
}
否则{
var currentTime=（新日期（））.getTime（），
insertedFlag=false；
对于（var i=0；i=持续时间）{
playFrame（）；
如果（何时）{
whendone（元素）；
};
返回；
};
playFrame（）；
frame++；
averageRenderTime=延迟时间/帧；
fps=1000/平均时间；
inQueue=myJobManager.add（作业类型({
“fn”：显示下一帧，
“延迟”：（fps<15？0:normalRenderTime-AveragerRenderTime），
“startTime”：（新日期）.getTime（），
“评论”：框架
}));
}
};
（功能（）{
如果（此.addEventListener）{
this.addEventListener（“load”，init，false）
}
否则{
window.onload=init；
}
}());

HTML仅限 您可以使用

。以下代码没有任何依赖关系。 没有JavaScript、CSS，只有HTML

一些细节
更多关于细节的信息

更多细节
下面是关于细节的更多细节

我没有测试，但下面的代码应该可以工作

<script>

function toggleClass(){
      var element = document.getElementById("a");
      element.classList.toggle("b");
    }
    document.getElementById("c").addEventListener('click', toggleClass )

</script>

函数toggleClass（）{
var element=document.getElementById（“a
// By Plain Javascript
// this code will work on most of browsers. 
function hasClass(ele, clsName) {
    var el = ele.className;
    el = el.split(' ');
    if(el.indexOf(clsName) > -1){
        var cIndex = el.indexOf(clsName);
        el.splice(cIndex, 1);
        ele.className = " ";
        el.forEach(function(item, index){
          ele.className += " " + item;
        })
    }
    else {
        el.push(clsName);
        ele.className = " ";
        el.forEach(function(item, index){
          ele.className += " " + item;
        })
    }
}

var btn =  document.getElementById('btn');
var ele = document.getElementById('temp');

btn.addEventListener('click', function(){
    hasClass(ele, 'active')
})

<script>

function toggleClass(){
      var element = document.getElementById("a");
      element.classList.toggle("b");
    }
    document.getElementById("c").addEventListener('click', toggleClass )

</script>