使用JavaScript实现简单的堆栈效果

我现在正在玩，但是我很难使用链接而不是按钮作为这个动画的触发器

<button>Click me</button>
<figure class="stack stack-sidegrid">
  <img src="img/1.png" alt="img01"/>
  <img src="img/3.png" alt="img03"/>
  <img src="img/4.png" alt="img04"/>
</figure>

有没有人可以建议我如何使用这个代码

---

参考：

只需将

var-togglebtt=el.previouselement同级，

更改为

var-togglebtt=el.parentElement，

像这样：

(function() {
    [].slice.call( document.querySelectorAll( '.stack' ) ).forEach( function( el ) {
        var togglebtt = el,
            togglefn = function() {
                if( classie.hasClass( el, 'active' ) ) {
                    classie.removeClass( el, 'active' );
                }
                else {
                    classie.addClass( el, 'active' );
                }
            };

        togglebtt.addEventListener( 'click', togglefn );
    } );
})();

在该演示中，

togglebtt=el.previousElementSibling

用作触发器

el

是每个

它的

previousElementSibling

是

Click me

根据HTML

要使用链接来触发而不是此按钮，只需更改

togglebtt

的值即可

---

将其更改为

el

或

el.parentElement

，只需确保在加载文档后，您应该调用上述JS代码。我已经使用锚标记而不是按钮创建了上述示例的一个JSFIDLE&它正在工作。由于您的详细解释，它工作得非常完美！！真的很感激：）谢谢！很乐意帮忙，看来你现在不需要了。。。

(function() {
    [].slice.call( document.querySelectorAll( '.stack' ) ).forEach( function( el ) {
        var togglebtt = el.previousElementSibling,
            togglefn = function() {
                if( classie.hasClass( el, 'active' ) ) {
                    classie.removeClass( el, 'active' );
                }
                else {
                    classie.addClass( el, 'active' );
                }
            };
        togglebtt.addEventListener( 'click', togglefn );
    } );
})();

(function() {
    [].slice.call( document.querySelectorAll( '.stack' ) ).forEach( function( el ) {
        var togglebtt = el,
            togglefn = function() {
                if( classie.hasClass( el, 'active' ) ) {
                    classie.removeClass( el, 'active' );
                }
                else {
                    classie.addClass( el, 'active' );
                }
            };

        togglebtt.addEventListener( 'click', togglefn );
    } );
})();