显示和隐藏多个 div jquery 显示/隐藏/切换

Question

我正在使用页面中的 3 个按钮和 3 个部分。这是精简的代码。

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

加载页面时： FilterBtn 显示， 结果Btn被隐藏， 显示详细信息。 过滤器 div 被隐藏， 结果 div 显示， 详细信息 div 已隐藏。

如果用户点击 detailsBtn： filterBtn 被隐藏， 结果显示， ResultsSection div（包括结果 div 和过滤器 div）被隐藏， 显示细节 div。

如果用户点击 resultsBtn： 显示了 filterBtn， resultsBtn 被隐藏， 结果 div 显示， 过滤器 div 被隐藏， 详细信息 div 已隐藏。

如果用户点击filterBtn： filterBtn 被隐藏， 结果显示， 结果 div 被隐藏， 过滤器 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。

无论如何，以下内容现在应该符合您的期望。现在，隐藏/展示的顺序与您在预期中列出的顺序相同。

--

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");
});