Question

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

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

加载页面时

：显示FilterBtn， ResultsBtn被隐藏，显示DetailsBtn。过滤器div被隐藏，显示结果div，细节div是隐藏的。

如果用户点击detailsBtn： filterBtn被隐藏，结果显示了， ResultsSection div（包括结果div和滤镜div）被隐藏，显示详细信息div。

如果用户点击resultsBtn： filterBtn显示， resultsBtn被隐藏了，结果div显示，滤镜div是隐藏的，细节div是隐藏的。

如果用户点击了filterBtn： filterBtn被隐藏， resultsBtn显示，结果div是隐藏的，滤镜div显示，细节div是hiden。

目前这不是我想要的方式。当我单击一个按钮时，无论我如何在脚本中排列它们，都会隐藏两个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");
});

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

1 个答案: