1

ページで 3 つのボタンと 3 つのセクションを使用しています。これがコードを削除したものです。

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

ページのロード時: FilterBtn が表示され、ResultsBtn が非表示になり、DetailsBtn が表示されます。フィルター div は非表示、結果 div は表示、詳細 div は非表示です。

ユーザーが detailsBtn をクリックする と、filterBtn が非表示になり、ResultsBtn が表示され、ResultsSection div (結果 div とフィルター 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 に答える