0

ここに開発ページを設定しました: http://dev.harryg.me/da/

側面には、クリックするとアニメーションが開き、タイトルが再度クリックされるとアニメーションが閉じられる3つのdivがあります。

ユーザーがドキュメントの別の場所をクリックすると、すべての div が閉じるように機能を追加したかったのです。これはほとんど問題なく機能しますが、div の外側をクリックした結果として div が開いて閉じられた場合、ユーザーはそれを 2 回クリックして再度開く必要があります。

原因について何か考えはありますか？

これが私のjQueryです...

jQuery(function($) {
    $('h2.tab-title').toggle(function() {
        $(this).parent().animate({left:'0px'}, {queue:false, duration: 500});
    }, function() {
        $(this).parent().animate({left:'-338px'}, {queue:false, duration: 500});
    });

});
jQuery(".side-tab").click(function(){ return false; });
jQuery(document).bind("click", function() { jQuery(".side-tab").animate({left:'-338px'}, {queue:false, duration: 500}); });
4

3 に答える 3

1

openedたとえば、開いた div にクラスを追加し、toggleこのクラスで div のメソッドをトリガーするのが最善の方法だと思います。呼び出さtoggleれたメソッドは、閉じるアニメーションを処理します。そしてもちろん、ポップヌードルが私に思い出させたようopenedに、閉じた状態に切り替えるときにクラスを削除する必要があります。

EDIT：あなたが望むように動作している更新されたコード：

jQuery(function($) {
    $('h2.tab-title').toggle(function() {
        $(this).parent().animate({left:'0px'}, {queue:false, duration: 500});
        $(this).parent().addClass('opened');
    }, function() {
        $(this).parent().animate({left:'-338px'}, {queue:false, duration: 500});
        $(this).parent().removeClass('opened');
    });

});
jQuery(".side-tab").click(function(){ return false; });
jQuery(document).bind("click", function() { jQuery(".opened h2.tab-title").trigger('click');});
于 2013-02-07T23:00:24.537 に答える
1

デモ

開くイベントと閉じるイベントを作成し、その後のクリックでいずれかをトリガーし、ドキュメントのクリックで閉じるをトリガーします。

<div><h2 class="tab-title">h2</h2></div>
<div><h2 class="tab-title">h2</h2></div>
<div><h2 class="tab-title">h2</h2></div>
<div><h2 class="tab-title">h2</h2></div>

JS

$('h2.tab-title').on('open', function() {
    $(this).parent().animate({left:'0px'}, {queue:false, duration: 500}).data('open',true);
}).on('close', function() {
    $(this).parent().animate({left:'-338px'}, {queue:false, duration: 500}).data('open',false);
}).on('click', function(){
    if ($(this).parent().data('open')){
        $(this).trigger('close');
    }else{
        $(this).trigger('open');
    }
});
$(document).on('click', function(){
     $('h2.tab-title').trigger('close');
});

$('.side-tab').on('click', function(e){ e.stopPropagation(); }); // stop any click in the side tab from bubbling up to the document
于 2013-02-07T23:11:45.293 に答える
0

トグルをクリックに変更し、2 番目の関数を削除して、開いているか閉じているかを確認する検証を行います (左の属性を取得して 0 未満かどうかを確認するなど)。

最初のクリックで最初の関数が呼び出され、div が表示されます。div の外側をクリックすると、div が閉じます。

もう一度クリックすると、閉じる関数である 2 番目の関数が呼び出されます。それが機能していない理由です！

于 2013-02-07T22:59:30.193 に答える