顯示和隱藏多個div jquery顯示/隱藏/切換

Question

我正在使用3個按鈕和3個部分在我的頁面中。這是精簡的代碼。

http://jsfiddle.net/f6P87/17/

加載頁面時： FilterBtn所示， ResultsBtn是隱藏的， DetailsBtn所示。 過濾div被隱藏， 顯示結果div， 細節div被隱藏。

如果用戶點擊detailsBtn： filterBtn是隱藏的， ResultsBtn所示， ResultsSection DIV（包括結果的div和過濾器DIV）是隱藏的， 詳細DIV被示出。

如果用戶點擊resultsBtn： filterBtn所示， resultsBtn是隱藏的， 結果DIV所示， 濾波器格被隱藏， 細節格被隱藏。

如果用戶點擊filterBtn： filterBtn是隱藏的， resultsBtn所示， 結果格被隱藏， 濾波器DIV所示， 細節DIV是隱伏。

這目前沒有按我想要的方式工作。當我點擊一個按鈕時，無論我如何將它們排列在腳本中，這兩個div都是隱藏的。有人可以幫我用腳本邏輯來完成這項工作嗎？

下面是HTML：

<div id="wrap"> 
    <div class="row"> 
     <div id="filterBtn"> <a href="#" class="button">Filters Button</a> 
     </div> 
     <div id="resultsBtn"> <a href="#" class=" button">Results Button</a> 
     </div> 
    </div> 
    <div id="resultsSection" class="row" style="display:block;"> 
     <div id="filters">Filters Section</div> 
     <div id="results">Results Section 
      <div class="hide-for-small detailsBtn"> <a href="#" class=" button">Details Button</a> 
      </div> 
     </div> 
     <!-- Details --> 
     <div id="detailSection" class="row details" style="padding-top:0px" ;> 
      <div class="row"> 
       <h3><small>Details Section</small></h3> 

      </div> 
     </div> 

和文字：

$("#resultsBtn").click(function() { 
    $("#detailSection").show("slow"); 
    $("#resultsSection").toggle("slow"); 
    $("#resultsBtn").hide("fast"); 
}); 

$(".detailsBtn").click(function() { 
    $("#detailSection").show("slow"); 
    $("#resultsSection").hide("slow"); 
    $("#resultsBtn").show("fast"); 
     $("#filtersBtn").hide("fast"); 
}); 

$("#filterBtn").click(function() { 
    $("#resultsBtn").show("fast"); 
    $("#filterBtn").hide("fast"); 
    $("#filters").show("slow"); 
    $("#resultsSection").hide("slow");  
}); 

Answer 1

去你的HTML一切的原因隱藏是因爲你告訴它隱藏結果的部分，它周圍的一切都包。

$("#filterBtn").click(function() { 
    $("#resultsBtn").show("fast"); 
    $("#filterBtn").hide("fast"); 
    $("#filters").show("slow"); 

    // This hides the whole section which is wrapping around everything 
    $("#resultsSection").hide("slow");  
}); 

我認爲你必須再次通過你的期望，並確保你的目標是正確的元素。一旦工作，您可以優化方法。我嘗試將其整理出來，但這需要一點點時間。

你有幾乎所有的權利除外，一些1或2 </div>人失蹤，並以復加，在過濾器按鈕事件的最後一行應該已經參照#results元素，而不是#resultsSection，在少數地方，你過濾器按鈕的元素ID拼寫錯誤。你寫了#filtersBtn而不是#filterBtn。

無論如何，下面的內容應該符合您的期望。現在按照您在預期中列出的順序對hide/shows進行排序。

-

DEMO - 新代碼

-

$("#resultsBtn").click(function() { 
    $("#resultsSection").show("slow"); 
    $("#filterBtn").show("fast"); 
    $("#resultsBtn").hide("fast"); 
    $("#results").show("slow"); 
    $("#filters").hide("slow"); 
    $("#detailSection").hide("slow"); 
}); 

$(".detailsBtn").click(function() { 
    $("#filterBtn").hide("fast"); 
    $("#resultsBtn").show("fast"); 
    $("#resultsSection").hide("slow"); 
    $("#detailSection").show("slow"); 
}); 

$("#filterBtn").click(function() { 
    $("#filterBtn").hide("fast"); 
    $("#resultsBtn").show("fast"); 
    $("#results").hide("slow"); 
    $("#filters").show("slow"); 
    $("#detailSection").show("slow"); 
});