jquery - 非表示/表示切り替え div

Question

助けてください！既に開いている特定の DIV を閉じる方法を見つけようとしています。

たとえば、次を参照してください: http://jsfiddle.net/WGRvw/

BCをクリックすると DIV が表示されますが、もう一度クリックすると DIV は消えますが、それを消す方法がわかりません。また、一度に表示される DIV は 1 つだけです。

私はelseをやってみました：

          $(function(){
            $(document).ready(function () {
                $(".prov").click(function(){
                    $(".clearfix").hide();
                });

                $('#BC').hide();
                $('#BC-show').click(function () {
                    if( $('#BC').toggle('slow')) {
                        return false;

                    }
                    else {
                        $('#BC').hide();
                    }
                });
                $('#AB').hide();
                $('#AB-show').click(function () {
                    if($('#AB').toggle('slow')) {
                        return false;

                    }
                    else {
                        $('#AB').hide();
                    }
                });
                });
            });

    });

あなたの助けに感謝します。

ありがとう！

score 3 · Accepted Answer

各要素に 2 つのイベントを添付しているようです。

1 つはclassNameを使用し、もう1 つはIDを使用します

このコードを試してください

$(function() {
    $(document).ready(function() {
        $('#BC, #AB').hide();

        $(".prov").click(function() {
            var id = $(this).attr('id').split('-')[0];
            $('.clearfix').not('#'+id).hide();
            $('#' + id).toggle('slow');
            return false;
        });
    });
});

フィドルをチェック

クラスを使用してイベントをアタッチし、そこから ID を取得し、それを使用して切り替えます。

score 1 · Accepted Answer

リンクの表示をクリックすると、divが非表示になり、toggleを呼び出すと、基本的に毎回divが再度表示されます。そのため、目的の効果が得られません。したがって、以下は省略してください。

更新：

            $(document).ready(function () {

                $('#BC, #AB').hide();
                $('#BC-show').click(function () {
                    $('.clearfix:visible').not('#BC').hide()
                        $('#BC').toggle('slow');
                        return false;
                });
                $('#AB-show').click(function () {
                    $('.clearfix:visible').not('#AB').hide()
                        $('#AB').toggle('slow');
                        return false;
                });
            });

score 0 · Accepted Answer

最初のイベントハンドラーが要素を非表示にしていて、次にトグルが呼び出されているようです。したがって、トグルは要素を非表示にしているため、要素を表示します $(".prov").click(function(){ $(".clearfix").hide(); });。

score 0 · Accepted Answer

$(function() {
    $('#BC, #AB').hide();

    $('.prov').click(function() {
        $('#'+this.id.replace('-show','')).toggle('slow').siblings('div').hide('slow');
        return false;
    });
});

フィドル

2 つの DOM 対応関数は必要ありません。クラスにバインドされた最初の関数は要素を非表示にし、ID にバインドされた 2 番目の関数は要素を切り替えます。これはもちろん非表示になっており、常に表示されます。

jquery - 非表示/表示切り替え div

4 に答える 4

Related

Reference