2

いずれかのリンクをクリックすると、スクリプトは正常に機能します。同じリンクが 2 回目にクリックされた場合に、表示/非表示スクリプトが実行されないようにします。このサイトや他のサイトで .unbind が最も有望であると試してみるいくつかのことを見つけましたが、私の関数は で始まり、バインドを解除すると$(this).click(function ()すべてが殺されます。コードを再構築する方法がわからないのでtoggleDiv、クリック前にクリックtoggleDiv後にチェックして、それらが同じかどうかを確認し、スクリプトを削除します。

コードペン: http://codepen.io/jpscoggan/pen/gcHbK

ここに私のjsコードがあります:

//show hide
(function ($) {

    $.fn.showHide = function (options) {

        //default vars for the plugin
        var defaults = {
            speed: 200,
            easing: 'swing'
        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
            $('.toggleDiv').slideUp(options.speed, options.easing);
            // once the button is clicked, the clicked div (.toggleDiv) slides up  
            var toggleDiv = $(this).attr('rel');
            // reads rel attribute of clicked link / which div id to toggle 
            $(toggleDiv).slideToggle(options.speed, options.easing);
            // toggle show/hide the correct div + speed and easing

            e.preventDefault();
        });
    };
})(jQuery);

$('.show_hide').showHide({
    speed: 200,
    // speed you want the toggle to happen             
});
4

2 に答える 2

1

これを行う簡単な方法: クリックしたばかりのクラスにクラスを追加し、そのリンクがアクティブな場合は 2 回目のクリックを禁止します。

コデペン

$('.show_hide section').click(function() {
    if ($(this).hasClass('active')) return false;
    //use if you want to allow a click after switching sections
    $('.active').removeClass('active');
    $(this).addClass('active');
});
于 2013-07-18T15:47:51.723 に答える