jquery切換無線手風琴

Question

嗨有兩個內容部分，我只想要一次打開1。基於點擊標題，它們都會崩潰並打開。我目前正在工作，他們是彼此獨立的，但我希望讓他們在顯示時隱藏另一個。我不想爲jQuery手風琴使用插件。

這裏是代碼，我現在：

HTML：

<div class="topCats"> 
    <h4><a href="#" class="openBox">Most Searched Categories</a></h4> 
</div> 
<div id="topCatsContainer"> 
    content 1 
</div> 
<div class="allCats"> 
    <h4><a href="#" class="closed">All Categories</a></h4> 
</div> 
<div id="allCatsContainer"> 
    content 2 
</div> 

JS：

$('#allCatsContainer').css("display", "none"); 
$('.topCats h4 a').click(function() { 
    $('#topCatsContainer').slideToggle(500); 
     $(this).toggleClass("openBox"); 
}); 

$('.allCats h4 a').click(function() { 
    $('#allCatsContainer').slideToggle(500); 
    $(this).toggleClass("openBox");                  
}); 

任何幫助將不勝感激。

感謝

Answer 1

我試圖不改變你的HTML如果可能的話，這樣你就不必處理樣式頭痛。不幸的是，這意味着JS比我想要的更硬編碼。

HTML：

<div class="topCats"> 
    <h4><a href="#" class="openBox">Most Searched Categories</a></h4> 
</div> 
<div id="topCatsContainer" class="accordianContent"> 
    content 1 
</div> 
<div class="allCats"> 
    <h4><a href="#" class="closed">All Categories</a></h4> 
</div> 
<div id="allCatsContainer" class="accordianContent"> 
    content 2 
</div> 

的HTML是一樣的，除了我添加了一個類，每個內容股利。

JS：

$('#allCatsContainer').css("display", "none"); 

$('.topCats h4 a, .allCats h4 a').click(function() { 
    var content = $(this).parent().parent().next(); 

    if(content.is(':visible')) { 
     content 
      .slideUp(500) 
      .addClass('closed') 
      .removeClass('openBox'); 
    } else { 
     content 
      .parent() 
      .find('.accordianContent:visible') 
      .slideUp(500) 
      .addClass('closed') 
      .removeClass('openBox'); 

     content.slideDown(500).removeClass('closed').addClass('openBox'); 
    } 
}); 

基本上JS認定，被點擊的鏈接相匹配的內容。如果內容可見，那麼它只是關閉自己。如果它不可見，那麼我們關閉任何可見的並打開點擊的內容。

如果您發現我正在切換openBox和closed類，這可能是多餘的，但我不確定您的樣式是否依賴它。

一般來說，這個功能可以通過多種方式完成，如果你願意改變你的HTML，我們可以讓JS方面看起來更具有代表性:)否則，你可以使用這個實現並避免任何樣式問題。

Answer 2

這是回答最近在這裏：What code do i need to collapse a div when another is open?

最簡單的辦法是既崩潰，然後展開你想要的。已經崩潰的那個將被忽略。

$('yourdivs').click(function() { 
    $("yourdivs").slideUp(); 
    $(this).slideDown(); 
}); 

更新：以上不會爲他工作，因爲有<a>和<div>之間沒有直接的聯繫。這實在是太醜了，但下面的工作http://jsfiddle.net/mrtsherman/MPwQ8/3/

$('#allCatsContainer').css("display", "none"); 

$('.topCats h4 a').click(function() { 
    $('#topCatsContainer').slideToggle(500);  
    $('#allCatsContainer').slideToggle(500); 
    $(this).toggleClass("openBox"); 
}); 

$('.allCats h4 a').click(function() { 
    $('#allCatsContainer').slideToggle(500); 
    $('#topCatsContainer').slideToggle(500); 
    $(this).toggleClass("openBox"); 
}); 

有很多更好的方法來做到這一點。我爲你提供的初始鏈接有一個例子。如果你想要更強大的功能，那麼你需要創建一些手段來將你的鏈接邏輯地綁定到你的div。