超轻扩展折叠javascript解决方案？_Javascript_Toggle

超轻扩展折叠javascript解决方案？

javascript

超轻扩展折叠javascript解决方案？,javascript,toggle,Javascript,Toggle,单击“切换”文本时，如何打开/关闭content div <div class="toggle col">TOGGLE <div class="content-to-toggle"> content </div> </div> ？该函数有一些缺陷： addEventListener将在IE 8及更低版本的浏览器中失败 e.target将在IE 8及更低版本的浏览器中失败 indexOf（'toggle'）将匹配类值中的任何位置，

单击“切换”文本时，如何打开/关闭content div

<div class="toggle col">TOGGLE

  <div class="content-to-toggle">
    content
  </div>
</div>

？

该函数有一些缺陷：

addEventListener将在IE 8及更低版本的浏览器中失败

e.target

将在IE 8及更低版本的浏览器中失败

indexOf（'toggle'）

将匹配类值中的任何位置，可能最好使用如下常规表达式：/（^ |\s）toggle（\s |$）/

replace（/\bexp\b |\bcol\b/

使用分词作为分隔符，但类值由空格分隔，而不是分词（如连字符）

最后，你说的“LIGTER”是什么意思？更少的代码？更快？使用更少的资源

编辑更好的函数版本将使用：

附加侦听器的跨浏览器方法（有许多通用addListener函数）

确定是否应切换类值的通用方法（简单的hasClass函数）

删除一个类值并添加另一个类值的通用方法（简单的removeClass和addClass函数）

此外，还应该有一个fork来说明如果元素没有这两个类中的任何一个，那么该怎么办？它应该默认为其中一个类还是什么都不做

下面是一个例子：

<title>Toggling Example</title>

<style type="text/css">
  .exp {background-color: #666666;}
  .col {background-color: #bbbbbb;}
</style>

<script type="text/javascript">

// Generic container for utility functions
var util ={};

util.trim = function(s) {
  return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}

// Generic container for DOM functions
util.dom = {};

util.dom.hasClass = function(el, cName) {
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
};

util.dom.addClass = function(el, cName) {
    if (!util.dom.hasClass(el, cName)) {
        el.className = util.trim(el.className + ' ' + cName);
    }
};

util.dom.removeClass = function(el, cName) {
    if (util.dom.hasClass(el, cName)) {
        var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = util.trim(el.className.replace(re, ''));
    }
}

// Generic container for DOM event functions
util.event = {};

util.event.addListener = function(el, evt, fn) {
  if (el.addEventListener) {
    el.addEventListener(evt, fn, false);
  } else if (el.attachEvent) {
    el.attachEvent('on' + evt, fn);
  }
}

function toggleClass(el, c0, c1) {

  // Replace c0 with c1
  if (util.dom.hasClass(el, c0)) {
    util.dom.removeClass(el, c0);
    util.dom.addClass(el, c1);

  // Replace c1 with c0
  } else if (util.dom.hasClass(el, c1)) {
    util.dom.removeClass(el, c1);
    util.dom.addClass(el, c0);

  // If doesn't have either class, add c0
  } else {
    util.dom.addClass(el, c0);
  }
}

// Is this "light" enough?
window.onload = function() {
  util.event.addListener(document.body, 'click', function(e) {
    var e = e || window.event;
    var el = e.target || e.srcElement;
    toggleClass(el, 'exp', 'col');
  });
}

</script>

<div>foo bar</div>

它的效率更高，并且对类名值使用标准分隔符。