在没有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和CSS的:checked选择。

Working jsFiddle Demo。

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

你可以使用JavaScript（jQuery的没有）和类ID得到任何元素的属性： 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(); 
} 

Answer 4

function init() { 

    animateCSS(document.getElementById("slide"), 250, { 
     left: function (timePercent, frame) { 

      var endPoint = 128, 
       startPoint = 0, 
       pathLength = endPoint - startPoint, 
       base = 64,       //slope of the curve 
       currentPos = Math.floor(startPoint + (Math.pow(base, timePercent) - 1)/(base - 1) * pathLength); 

      return currentPos + "px"; 
     } 
    }, function (element) { 
     element.style.left = "128px"; 
    }); 

}; 
var JobType = function() { 
    if (!(this instanceof JobType)) { 
     return new JobType(arguments[0]); 
    }; 
    var arg = arguments[0]; 
    this.fn = arg["fn"]; 
    this.delay = arg["delay"]; 
    this.startTime = arg["startTime"]; 
    this.comment = arg["comment"]; 
    this.elapsed = 0; 
}; 
function JobManager() { 
    if (!(this instanceof JobManager)) { 
     return new JobManager(); 
    }; 
    var instance; 
    JobManager = function() { 
     return instance; 
    }; 
    JobManager.prototype = this; 
    instance = new JobManager(); 
    instance.constructor = JobManager; 
    var jobQueue = []; 
    var startedFlag = false; 
    var inProcess = false; 
    var currentJob = null; 
    var timerID = -1; 
    var start = function() { 
     if (jobQueue.length) { 
      startedFlag = true; 
      currentJob = jobQueue.shift(); 
      var startOver = currentJob.delay - ((new Date()).getTime() - currentJob.startTime); 
      timerID = setTimeout(function() { 
       inProcess = true; 
       currentJob.fn(); 
       if (jobQueue.length) { 
        try { 
         while ((jobQueue[0].delay - ((new Date()).getTime() - currentJob.startTime)) <= 0) { 
          currentJob = jobQueue.shift(); 
          currentJob.fn(); 
         }; 
        } 
        catch (e) { }; 
       } 
       inProcess = false; 
       start(); 
      }, (startOver > 0 ? startOver : 0)); 
     } 
     else { 
      startedFlag = false; 
      timerID = -1; 
     }; 
    }; 
    instance.add = function (newJob) { 
     if (newJob instanceof JobType) { 
      stopCurrent(); 
      var jobQueueLength = jobQueue.length; 
      if (!jobQueueLength) { 

       jobQueue.push(newJob); 
      } 
      else { 
       var currentTime = (new Date()).getTime(), 
        insertedFlag = false; 
       for (var i = 0; i < jobQueueLength; i++) { 
        var tempJob = jobQueue[i], 
         tempJobElapsed = currentTime - tempJob["startTime"], 
         tempJobDelay = tempJob["delay"] - tempJobElapsed; 
        tempJob["elapsed"] = tempJobElapsed; 
        if (newJob["delay"] <= tempJobDelay) { 
         if (!insertedFlag) { 
          jobQueue.splice(i, 0, newJob); 
          insertedFlag = true; 
         } 
        }; 
        if (i === (jobQueueLength - 1)) { 
         if (!insertedFlag) { 
          jobQueue.push(newJob); 
          insertedFlag = true; 
         } 
        } 
       }; 
      }; 
      if ((!startedFlag) && (!inProcess)) { 
       start(); 
      }; 
      return true; 
     } 
     else { 
      return false; 
     }; 
    }; 
    var stopCurrent = function() { 
     if (timerID >= 0) { 
      if (!inProcess) { 
       clearTimeout(timerID); 
       timerID = -1; 
       if (currentJob) { 
        jobQueue.unshift(currentJob); 
       }; 
      }; 
      startedFlag = false; 
     }; 
    }; 
    return instance; 
}; 
function animateCSS(element, duration, animation, whendone) { 
    var frame = 0, 
     elapsedTime = 0, 
     timePercent = 0, 
     startTime = new Date().getTime(), 
     endTime = startTime + duration, 
     fps = 0, 
     averageRenderTime = 1000, 
     normalRenderTime = 1000/25, 
     myJobManager = JobManager(); 
    var inQueue = myJobManager.add(JobType({ 
     "fn": displayNextFrame, 
     "delay": 0, 
     "startTime": (new Date).getTime(), 
     "comment": "start new animation" 
    })); 
    function playFrame() { 
     for (var cssprop in animation) { 
      try { 
       element.style[cssprop] = animation[cssprop].call(element, timePercent, frame); 
      } catch (e) { } 
     }; 
    }; 
    function displayNextFrame() { 
     elapsedTime = (new Date().getTime()) - startTime; 
     timePercent = elapsedTime/duration; 
     if (elapsedTime >= duration) { 
      playFrame(); 
      if (whendone) { 
       whendone(element); 
      }; 
      return; 
     }; 

     playFrame(); 
     frame++; 
     averageRenderTime = elapsedTime/frame; 
     fps = 1000/averageRenderTime; 
     inQueue = myJobManager.add(JobType({ 
      "fn": displayNextFrame, 
      "delay": (fps < 15 ? 0 : normalRenderTime - averageRenderTime), 
      "startTime": (new Date).getTime(), 
      "comment": frame 
     })); 
    } 
}; 
(function() { 
    if (this.addEventListener) { 
     this.addEventListener("load", init, false) 
    } 
    else { 
     window.onload = init; 
    } 
}()); 

Answer 5

// 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') 
})