0

ポートフォリオアイテムリストがあります。特定のdivslidesDownをクリックすると、閉じるリンクをクリックして閉じる（slideUp）ことができます。正常に動作しますが、他のアイテムをクリックするとイベントが2回発生するため、クラス名の関係により、上下に2回スライドしますか？index（）を使用して要素を取得しているため、divIDに0,1,2,3,4,5,6...を指定しています。

誰かがこれまたはより良い解決策の良い回避策を説明できますか？

HTML Markup example:

<div style="display:none;" id="0" class="sliderwrapper">
   <div class="close"> <a href="#" title="Close"> Close </a></div>
   //SINGLE PORTFOLIO ITEM CONTENT
</div>

<div style="display:none;" id="1" class="sliderwrapper">
   <div class="close"> <a href="#" title="Close"> Close </a></div>
   //SINGLE PORTFOLIO ITEM CONTENT
</div>

<div style="display:none;" id="2" class="sliderwrapper">
   <div class="close"> <a href="#" title="Close"> Close </a></div>
   //SINGLE PORTFOLIO ITEM CONTENT
</div>

JS:

(function(){

    $('.close').on('click', function(){
      $('.sliderwrapper').slideUp(800);
    });

    $('.singleitems ul li').on('click', function(){
      var index = $(this).index();
      $('.sliderwrapper').slideUp(800, function(){

          $('#' + index).slideDown(800);
      });

    });

})();
4

1 に答える 1

2

slideDownをコールバック関数から変更しただけの場合、呼び出されるのは1回だけです。

このコードは、アニメーションが重なるのを防ぎます。

$(document).ready(function() {
    var selected = false;
    $('.close').on('click', function() {
        $(this).parent('.sliderwrapper').slideUp(800);
        selected = false;
    });

    $('.singleitems ul li').live('click', function() {
        var index = $(this).index();

        if(!selected) {
            $("#" + index).slideDown(800);
            selected = true;
        } else {
            $(".sliderwrapper").filter(":visible").slideUp(800, function() {
                $("#" + index).filter(":hidden").slideDown(800);
            });
        }
    });
});​
​
于 2012-04-22T09:20:07.417 に答える