javascript - トグル、非表示、表示の問題 (Jquery)

Question

次の問題を処理するスクリプトを探していました。

http://jsfiddle.net/k7E9V/3/

1. div の外側をクリックすると、div が閉じます。
2. 他の div がクリックされたときに 1 つの div を閉じます。
3. [詳細] をもう一度クリックすると、div が閉じます。

div がアクティブなときにマイナス アイコンが表示されない理由と、上記のすべてのシナリオでプラス アイコンを復元する方法を知りたいです。

Answer 1

の機能は:active、あなたが考えているものとは異なります。アイコンを切り替えられるようにするには、最初に次のような CSS ルールを追加します:active。

a.trigger.isshown{
    background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Close-icon.png) 95% 65% no-repeat;
}

これで、 を使用して.toggleClass('isshown');、パネルをトグル/非表示/表示するのと同じ方法.removeClass('isshown');でアイコンを変更することもできます。.addClass('isshown');div

Answer 2

最終バージョン: jsFiddle

@Christopher がコメントしたように、:activeセレクターをサブクラスにし、それに応じてクラスを切り替える X ボタンの動作を修正しました。.trigger.trigger

$('.trigger').click(function(event) {
    event.preventDefault();
    var panel = $(this).next('.panel');
    $('.panel').not(panel).hide();
    panel.toggle("fast");
    $('.trigger').not(this).removeClass('active'); //remove active class from other X buttons
    $(this).toggleClass('active'); //toggle the clicked button's active class
});

このようにしてactive、他の X ボタンからクラスを削除し、要求に応じて現在のクラスを切り替えます。

.panelandの外側をクリックしたときにボックスを閉じるには、.triggerこれを DOM Ready ハンドラーの内側に追加します。

$(document).click('click', function(e) {
    if (!$('.panel').is(':visible')) return;
    var targ = $(e.target);
    //doesn't close the boxes if target is .panel/.trigger or their descendant
    if (targ.closest('.panel').length || targ.is('.panel')
       || targ.closest('.trigger').length || targ.is('.trigger')) return;
    $('.panel').hide('fast');
    $('.trigger').removeClass('active');
});

Answer 3

http://jsfiddle.net/dwZnG/ サイズについては、これを試してください。

a.trigger{
position: absolute;
text-decoration: none;
bottom:0; 
right: 0;
font-size: 17px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#333;
padding: 20px 30px 10px 15px;
font-weight: 600;
background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Add-icon.png) 95% 65% no-repeat;
display: block;
}

/* Change active to a class name*/
a.trigger.active {
background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Close-icon.png) 95% 65% no-repeat;
}

次に、あなたのJS：

$(document).ready(function() {
    $('.trigger').click(function(event) {
        event.preventDefault();
        var me = $(this);
        var panel = me.next('.panel');
        //If active is there, remove it
        if (me.hasClass("active")) {
            me.removeClass("active");
        }
        //If it ain't...add it
        else {
            me.addClass("active");
        }
        $('.panel').not(panel).hide();
        panel.toggle("fast");
        $(document).ready(function() {
            $('.panel').hover(function() {
                mouse_inside_div = true;
            }, function() {
                mouse_inside_div = false;
            });
            $('body').mouseup(function() {
                if (!mouse_inside_div) $('.panel').hide();

            });
        });
        });
    });​

基本的にはアバディの言うことと同じです。これを理解したら、残りの機能を理解できるはずです。