手风琴JS插件，CSS3 webkit

Question

手风琴插件

由于我不使用jQuery (因为我只喜欢使用Chrome和iOS/Android)，而且我更喜欢编写自己的函数，所以不久前我决定编写一个简单的手风琴功能：

• 短码
• 高性能
• 最新的JS CSS3 HTML5技术

我不想添加许多类和I，也不想添加许多均数。(我的iPad 1非常敏感，有太多的连载器，如果需要的话，它们也很难删除)

此函数不添加ids，不添加额外的类，只使用一个均衡器。

单手风琴：

单个手风琴的代码(可以将此函数应用于更多元素，但不能将手风琴放入手风琴中)：

function acsf(e) {
    var Accordion = e.target.parentNode;
    if (Accordion.parentNode == this && Accordion.firstChild == e.target) {
        if (this.CurrentAccordion == Accordion) {
            this.CurrentAccordion.style.height = '';
            delete this.CurrentAccordion
        } else {
            !this.CurrentAccordion || (this.CurrentAccordion.style.height = '');
            this.CurrentAccordion = Accordion;
            this.CurrentAccordion.style.height =
                (Accordion.firstChild.offsetHeight +
                this.CurrentAccordion.childNodes[1].offsetHeight) + 'px'
        }
    }
}

结构(在<>之间没有新的行或空格)：

<div class="accordion">
    <div>
        <div>Title</div>
        <div>Content</div>
    </div>
    <div>
        <div>Title</div>
        <div>Content</div>
    </div>
</div>

用法：

document.getElementsByClassName('accordion')[0].addEventListener('click',acsf,false);

上面的代码工作得很好。

http://jsfiddle.net/zhD5L/

但是，我想要创建一个插件，它将这个函数添加到每个元素中，并将其作为脚本来包含：

(function() {
 function acsf() {
  //the code above
 }
 function init(){
  var acs = D.getElementsByClassName('accordion'),
  acsl = acs.length;
  while(acsl--){
      acs[acsl].addEventListener('click',acsf,false);
  }
  window.removeEventListener('load',init,false);
 }
 window.addEventListener('load',init,false);
})()

这是正确的，还是更好的方法去做？

这是否应该消除使用其他变量或函数名产生问题的可能性？

我也想把手风琴放进手风琴，所以我写了下一个剧本，但是有一个延迟，我完全不知道怎么删除它。

我也不想使用settimeout。这是我所知道的唯一能让它工作的方法，而webkitAnimationEnd只是需要更多的代码。但是我需要在动画或超时结束之前得到下一个高度。

(function (D) {
    function acsf(e) {
        var a = e.target.parentNode,
            h;
        if (a.parentNode == this && a.firstChild == e.target) {
            h = a.firstChild.offsetHeight;
            !this.c || (this.c.style.height = h + 'px');
            this.c != a ?
                (this.c = a, this.c.style.height = (h + this.c.childNodes[1].offsetHeight) + 'px') :
                (this.c.style.height = h + 'px', delete this.c);
            setTimeout(acscf.bind(this), 350);
        }
    }

    function acscf(x) {
        x = this;
        if (x.parentNode && x.parentNode.parentNode &&
            x.parentNode.parentNode.parentNode &&
            x.parentNode.parentNode.parentNode.classList) {
            var y = x.parentNode.parentNode.parentNode;
            if (y.classList.contains('accordion')) {
                console.log(x.offsetHeight);
                y.c.style.height = (48 + (x.offsetHeight)) + 'px';
                setTimeout(acscf.bind(y), 350);
            }
        }
    }

    function acsinit() {
        var acs = D.getElementsByClassName('accordion'),
            acsl = acs.length;
        while (acsl--) {
            acs[acsl].addEventListener('click', acsf, false);
        }
        window.removeEventListener('load', acsinit, false);
    }
    window.addEventListener('load', acsinit, false);
})(document)

可玩的例子：

http://jsfiddle.net/x8dzh/

最新的手风琴标题包含其他两个手风琴。

现在，为了让事情变得更困难，我试图找到一种方法来与它之外的封闭函数进行交互。因此，基本上，用另一个脚本中创建的另一个函数来切换元素。

继续提问：

1. 创建一个插件来包含它，它不会给其他脚本带来问题。(我对JS课程完全陌生)
2. 消除延迟
3. 我希望能够与插件外部的函数切换外部的元素。

编辑

我刚发现我可以用try，catch和parentNodes的长支票。

if(x.parentNode && 
   x.parentNode.parentNode &&
   x.parentNode.parentNode.parentNode &&
   x.parentNode.parentNode.parentNode.classList..

至

try{
 y=x.parentNode.parentNode.parentNode.classList.contains('accordion')
}catch(e){
 y=false
}

但是表演呢？

Answer 1

您的代码有很多样式问题，样式问题太多，需要很长时间才能弄清楚它是做什么的。写得好的代码不会造成这个问题。我真的只能指出你做错了什么风格明智，在代码被清理后，也许我们(或你自己)可以找出你的问题。

• 没有一条评论
• Accordion以大写字母开头，应为构造函数保留。
• 这是if的一个快捷方式，除非您正在编写代码高尔夫球：!this.CurrentAccordion \x (this.CurrentAccordion.style.height =‘’)，否则不要使用这个快捷方式；
• 在顶部，应该避免使用像acsf这样的缩写
• 应该避免使用一个字符变量(除了常见的i、s和e之外)
• 这使我的眼睛流血，它是做什么的？(this.c .c= a，this.c.style.height = (h + this.c.childNodes1.offsetHeight) + 'px')：(this.c.style.height =h+ 'px'，删除这个.c)；使用逗号链接语句在三元中是完全错误的。
• 我不知道您为什么需要这样做:如果(x.parentNode & x.parentNode.parentNode && x.parentNode.parentNode.parentNode &x.parentNode.classList){这是非常脆弱的，至少我会对parentNode进行递归查找，直到在元素上找到将其识别为正确级别的东西为止。或者构建一个函数给n级父级，但是它又变得脆弱了。(这意味着HTML布局的更改将破坏您的函数)。