1

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

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

加载页面时： 显示FilterBtn，隐藏ResultBtn，显示DetailsBtn。Filters div 被隐藏，Results div 被显示，Details div 被隐藏。

如果用户点击 detailsBtn： filterBtn 被隐藏，ResultsBtn 被显示，ResultsSection div（包括 results div 和 filters div）被隐藏，Details div 被显示。

如果用户点击 resultsBtn： filterBtn 显示，resultsBtn 隐藏，results div 显示，filters div 隐藏，details div 隐藏。

如果用户点击filterBtn： filterBtn被隐藏，resultsBtn被显示，results div被隐藏，filters div被显示，details 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");    
});
4

1 回答 1

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

我认为您必须再次满足您的期望，并确保您针对正确的元素。一旦工作，您可以优化方法。我试着把它整理出来，但这需要一点时间。

您几乎没有问题，除了</div>缺少一些 1 或 2 并且必须添加，过滤器按钮事件中的最后一行应该引用#results元素而不是#resultsSection并且在一些地方您有过滤器的元素 id按钮拼写错误。你写#filtersBtn而不是#filterBtn.

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

--

演示- 新代码

--

$("#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");
});
于 2013-02-01T00:00:13.680 回答