Question

我现在正在玩https://tympanus.net/codrops/2014/03/05/simple-stack-effects/，但我正在努力使用链接而不是按钮作为此动画的触发。

<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>

更改为

<a href="#">
  <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>
</a>

这是用于处理事件的js脚本。

(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 );
    } );
})();

有人可能对我如何使此代码起作用有建议吗？

参考：https://tympanus.net/codrops/2014/03/05/simple-stack-effects/

Answer 1

只需将var togglebtt = el.previousElementSibling,更改为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是每个<figure class="stack ">

根据HTML，其previousElementSibling是<button>Click me</button>。

您要使用链接来触发而不是此按钮，只需要更改togglebtt的值即可。

将其更改为el或el.parentElement

JavaScript的简单堆栈效果

1 个答案: