1

divのセットがあり、1つをクリックすると、その特定のdivが開き、開いている他のすべてのdivが閉じます。開いているdivがある場合は、1つだけにする必要があります。クリックしたものを閉じるのを除外するのに苦労しています。誰か考えがありますか？従うべきJavascriptとHTML：

    $('.m_box').hide();
    $('.a_box').hide();

    $('#m2012').click(function(){
        //$('.m_box').hide();
        $('#m2012_box').toggle();
    });

    $('#m2011').click(function(){
        //$('.m_box').hide();
        $('#m2011_box').toggle();
    });

    $('#m2010').click(function(){
        //$('.m_box').hide();
        $('#m2010_box').toggle();
    });

    <div id="m2012" style="float:left; margin:0 69px 0 0; width:15px; height:19px; cursor:pointer;">
        <div id="m2012_box" class="m_box" style="float:left; display:block; position:absolute; width:308px; height:351px; top:20px; margin-left:-37px; color:#ffffff; background:url('images/graph/list_background_left.png'); z-index:2000;">
            <div class="list_header">
                <p>2012</p>
            </div>
            <div class="items">
                <div class="list_item">
                    Milestone 1
                </div>
                <div class="list_item">
                    Milestone 2
                </div>
                <div class="list_item">
                    Milestone 3
                </div>
                <div class="list_item">
                    Milestone 4
                </div>
                <div class="list_item">
                    Milestone 5
                </div>
                <div class="list_item">
                    Milestone 6
                </div>
            </div>
        </div>
    </div>

    <div id="m2011" style="float:left; margin:0 69px 0 0; width:15px; height:19px; cursor:pointer;">
        <div id="m2011_box" class="m_box" style="float:left; display:block; position:absolute; width:308px; height:351px; top:20px; margin-left:-37px; color:#ffffff; background:url('images/graph/list_background_left.png'); z-index:2000;">
            <div class="list_header">
                <p>2011</p>
            </div>
            <div class="items">
                <div class="list_item">
                    Milestone 1
                </div>
                <div class="list_item">
                    Milestone 2
                </div>
                <div class="list_item">
                    Milestone 3
                </div>
            </div>
        </div>
    </div>

    <div id="m2010" style="float:left; margin:0 69px 0 0; width:15px; height:19px; cursor:pointer;">
        <div id="m2010_box" class="m_box" style="float:left; display:block; position:absolute; width:308px; height:351px; top:20px; margin-left:-37px; color:#ffffff; background:url('images/graph/list_background_left.png'); z-index:2000;">
            <div class="list_header">
                <p>2010</p>
            </div>
            <div class="items">
                <div class="list_item">
                    Milestone 1
                </div>
                <div class="list_item">
                    Milestone 2
                </div>
                <div class="list_item">
                    Milestone 3
                </div>
            </div>
        </div>
    </div>
4

7 に答える 7

2

試す：

$('.list_header').click(function() {
    $(this).parent().parent().siblings().find('.items').hide();
    $(this).siblings().show();    
});​

証明： http： //jsfiddle.net/iambriansreed/J97Kq/

私のフィドルは、明確にするためにインラインCSSを削除しました。

于 2012-04-10T20:04:55.247 に答える
1

クリックされたdivの子（私が見る唯一のもの）をセレクターから除外するには、次を使用できますnot。

$('#m2012, #m2011, #m2010').click(function() {
    $('.m_box').not($(this).children().show()).hide();
});

UPD：子を開くようにコードを変更しました。

于 2012-04-10T20:04:16.367 に答える
0

共通クラスとvisibleを使用して、すべてを選択し、最初に非表示にする必要があります。

$('.m_box').click(function(){
    $('.m_box:visible').hide();
    $(this).show();
});
于 2012-04-10T20:02:13.857 に答える
0

これを処理できる2つの優れたビルド済みjQueryライブラリがあります。

jQuery Toolsは最も柔軟性があり、これを実装するのは比較的簡単です。jQuery UIは特定のスタイルをいくらか強制するため、ライブラリを使用する場合は、ツールがおそらく適切なアプローチです。

于 2012-04-10T20:02:27.683 に答える
-1

他のdivを閉じて、：visibleセレクターhttp://api.jquery.com/visible-selector/で開かれているかどうかを確認できます。

于 2012-04-10T20:00:19.173 に答える
-1

クリックイベントで、jQueryを使用してdivをfadeInおよびfadeOutすることができます。これが例です。

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

つまり、divをクリックしてクリックすると、ブックdivがフェードアウトまたはフェードインします。

于 2012-04-10T20:01:24.200 に答える
-1

セレクターを使用して、このような特定のインデックスを持つすべてのdivを閉じる必要があります。このセレクターは、インデックスが1より大きいすべてのdivを閉じます。

 $('#m2012').click(function(){

 $('#m2012_box').toggle();

      //index a integer value

     $("div:gt(1)").hide();

});
于 2012-04-10T20:08:21.050 に答える