显示和隐藏多个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"); 
});