0

テキストボックスを選択して、背景またはボックスをもう一度クリックして閉じることができるWebページがあります。

http://hashtag.ly/#NASCAR

だから私はクリックされたものに基づいてクラスを追加または削除するいくつかのコードを持っています:

$('li').click(function(){
    _this = $(this)
    if (_this.hasClass('active')) {
        //Close it if you clicked on that's already open
        _this.removeClass('active')
    } else if ($('li.active').length !== 0) {
        //close one and open another one you clicked
        _this.siblings().removeClass('active')
        _this.siblings().bind('webkitTransitionEnd oTransitionEnd transitionend',function(){
            _this.addClass('active');
        });
    } else {
        //open the first one
        _this.addClass('active');
    }

});

//Close when clicking the background
$('#close').click(function(){
    $('.active').removeClass('active')
});

問題:ボックスを開いてもう一度クリックすると、最初の if ステートメントのように、ボックスは自動的に閉じます。しかし、テキスト ボックスを 3 回 (秒の if ステートメントを使用して) 切り替えて、3 番目のテキスト ボックスを閉じようとすると、テキスト ボックスが何度も開き直ります。なぜこれを行うのかについての手がかりはありますか？

ありがとう！

4

1 に答える 1

0

わかった...

別のifステートメントを使用している場合でも、遷移イベントハンドラーはバインドを解除しません。少し読んで、jQueryの作成者によって提案されたように.bind（）と.unbind（）を.on（）と.off（）に移動し、onステートメントの関数の最後にoffステートメントを追加しました。

コードは次のとおりです。

$('li').click(function(){
    _this = $(this)
    if (_this.hasClass('active')) {
        //Close it if you clicked on that's already open
        _this.removeClass('active')
    } else if ($('li.active').length !== 0) {
        //close one and open another one you clicked
        _this.siblings().removeClass('active')
        _this.siblings().on('webkitTransitionEnd oTransitionEnd transitionend',function(){
            _this.addClass('active');
            _this.siblings().off('webkitTransitionEnd oTransitionEnd transitionend');
        });
    } else {
        //open the first one
        _this.addClass('active');
    }

});

//Close when clicking the background
$('#close').click(function(){
    $('.active').removeClass('active')
});
于 2012-06-27T05:49:08.143 に答える