jQuery - 單擊一個div，關閉所有其他問題

我有一組div，當我點擊一個div時，它應該打開該特定的div並關閉所有打開的div。如果有的話只能是一個開放的div。難以排除我從關閉中點擊的那個。任何人有任何想法？ Javascript和HTML遵循：jQuery - 單擊一個div，關閉所有其他問題

$('.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>

來源

2012-04-10 Dave Rottino

要選擇排除點擊div的兒童（只因爲我看到），可以使用not：

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

UPD：修改代碼，以便它打開了孩子。

來源

2012-04-10 20:04:16 Botanick

這樣做了！以及： $（'＃name_of_div'）。切換（）; 排除點擊的div，然後切換所述div正是我所需要的。謝謝。 – 2012-04-10 20:15:47

當它被接受時，這個答案不起作用。 @DaveRottino爲什麼不看看最高票數的答案？ – iambriansreed 2012-04-10 20:16:46

-1

您可以關閉其他的div如果它們與打開的檢查：可見選擇http://api.jquery.com/visible-selector/

來源

2012-04-10 20:00:19 romainberger

-1

您可以嘗試使用jQuery淡入和淡出的div上單擊事件。這是一個例子;

這意味着，當DIV點擊我點擊，它就會淡出或在書的div淡出

來源

2012-04-10 20:01:24 HarryBeasant

您應該使用普通類和可見選擇所有和第一隱藏。

$('.m_box').click(function(){ 
    $('.m_box:visible').hide(); 
    $(this).show(); 
});

來源

2012-04-10 20:02:13 jorgebg

有兩個偉大的預建的jQuery庫，可以處理這個問題：

jQuery Tools（特別是tabs功能，它可以實現爲accordion）
jQuery UI其中也有一個accordion函數

jQuery Tools將允許f或最大的靈活性，並且實施這應該是相對簡單的。 jQuery UI在某種程度上強制某種樣式，所以如果你想使用庫，Tools可能是正確的方法。

來源

2012-04-10 20:02:27 ramblinjan

這看起來並不像一個答案。將其作爲評論發佈而不是作爲答案。 – DG3 2012-04-10 20:12:30

從「如何問」：「您的問題的答案可能並不總是您想要的，但這並不意味着它是錯誤的。」這是對問題的回答。它解決了這個問題，即使它不完全是Dave所要求的。 – ramblinjan 2012-04-10 20:16:16

此外，即使這不是他所要求的，這可能與通過搜索發現此問題的其他人有關。 – ramblinjan 2012-04-10 20:32:06

嘗試：

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

證明：http://jsfiddle.net/iambriansreed/J97Kq/

我的小提琴刪除你的內聯CSS爲清晰起見。

來源

2012-04-10 20:04:55 iambriansreed

但這不是OP所要求的。當一個人打開時，他想關閉所有部分？ – elclanrs 2012-04-10 20:06:10

@elclanrs謝謝。更新。 – iambriansreed 2012-04-10 20:11:12

-1

你應該使用一個選擇器，關閉所有DIV具有一定的指數就是這樣，這個選擇關閉所有的div指數大於1

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

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

     //index a integer value 

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

});

來源

2012-04-10 20:08:21

jQuery - 單擊一個div，關閉所有其他問題

回答

相關問題