我正在努力学习 Mootools（该死，我错过了考虑 Open 的 30 天教程），并且我正在尝试构建一个简单的类切换脚本。我在这个网站上找到了一个可以解决问题的方法，但理想情况下，如果您单击当前活动元素，我希望能够从 li 元素中删除所有 .active 实例。
如果有人想看看这个问题，我已经创建了一个JSFiddle 。
我确实查看了 mootools 网站上的文档，但恐怕我仍然不知道哪个部分可以帮助我解决这个问题。我很想自己学习如何做这些事情，所以我不仅会为解决方案而感到高兴，而且会为我应该一直在寻找的 mootools 文档部分的指针来解决这个问题。谢谢。
【问题讨论】：
除了性能之外，您的代码还不错。我的意思是性能——它不应该每次点击都去dom来获取元素列表或当前活动的元素来做它需要做的事情——所有这些都可以被缓存。您的代码将针对集合中的任何 .active 运行，该集合最初的 .length 为 0，因此在第一次单击时不会发生任何事情。性能问题是必须再次选择所有元素以及带有 .active 的元素，然后在它们上运行 .each 以获得可以拥有它的单个成员。
你可以这样做：
http://jsfiddle.net/dimitar/m66Ju/2/
(function() {
var ul = document.getElement("ul.examples"), lis = ul.getElements("li"), active;
lis.addClass('transition');
lis.each(function(item){
item.addEvent('click',function(event){
if (active) {
// there is one, remove it.
active.removeClass('active');
}
if (active == this) {
// is the active one already open?
active = false;
return;
}
// make a new active.
active = this.addClass('active');
});
});
})();
这将是最高效的，并且也适用于初始活动 li。
没有关于如何构建代码以实现性能和重用的手册，但有一些演讲可能会有所帮助，例如 Aaron Newton 的 Programming to Patterns (with mootools) 等。经验法则是，不要过早优化但代码使支持的最慢浏览器（通常是 IE6 或 7）尽可能快地工作。单击事件提供了一些余地，但鼠标悬停事件可能会很昂贵。
【讨论】：
ul.getElements("li.active").removeClass("active");——你通过使用$$(".examples .active").removeClass("active")来做到这一点——它不适合你吗？因为我认为只有一个可以 .active 没有必要去选择器，因为你可以存储哪个。
因此，您的问题可以分为两个阶段：
li 元素。active 类。请记住，MooTools 是面向对象的。那么，您将处理哪些对象？ DOM 元素。这意味着你应该看看 MooTools 的Element documentation。
对于选择，您正在寻找Element.getElements method（或$$）。
然后，为了删除一个类……嗯，简单的Element.removeClass ;)
因此，您的代码应如下所示：
$$('li.active').removeClass('active');
【讨论】：