2

onclick、click、bind("click", ...)、などの使用に関する十数件の質問を調べましたが、on("click", ...)まだ問題を見つけていません。

基本的には、展開されていないときに一部のコンテンツを非表示にする展開可能な div です。コンテンツ自体を展開/折りたたむためにデータ切り替えボタンを備えた Twitter Bootstrapcollapseクラスを使用していますが、コンテナー div の CSS を変更して高さを増やし、コンテンツが入っているボックスが視覚的に伸びるようにする必要もあります。それを含むために。

これが私のスクリプトコードです：

$(document).ready(function() {
    $("#expand-button").bind('click', expandClick($));
    document.getElementById("#expand-button").bind("click", expandClick($));
});

function expandClick($) {
    $("#outer-container").animate({ "height": "350" }, 500);
    $("#expand-button").html("^");
    $("#expand-button").bind("click", collapseClick($));
};

function collapseClick($) {
    $("#outer-container").animate({ "height": "50" }, 500);
    $("#expand-button").html("V");
    $("#expand-button").bind("click", expandClick($));
}

アイデアは、ボタンの状態に応じてハンドラーが内外に回転するという単純なものです。実際に起こっていることは、ページをロードするとすぐに expandClick 関数がすぐに実行され、何もクリックされていないにもかかわらず、コンテナーが上下に跳ね返る無限ループを開始することです。

何か案は？

また、関連する必要はないと思いますが、HTML は次のようになります。

    <div id="outer-container" class="container-fluid subsession-collapsed">
        <div class="row-fluid" style="height: 50px">
            <!-- OTHER STUFF... -->
            <div class="span1" id="4">
                <button id="expand-button" class="btn-success" data-toggle="collapse" data-target="#expandable">V</button>
            </div>
        </div>
        <br /><br />
        <div id="expandable" class="row-fluid collapse">
            <div class="span12" style="padding: 0 20px">
                <!-- CONTENT -->
            </div>
        </div>
    </div>

編集：

解決策を見つけるために使用した SO トピックの 1 つがthis oneですが、すべての応答で同じ結果が得られました。

4

2 に答える 2

5

このステートメントは、の結果をハンドラーとして割り当てていexpandClickます。つまり、

$("#expand-button").bind('click', expandClick($));

する必要があります

$("#expand-button").bind('click', function() { expandClick($) });

もう 1 つの問題は、クリック ハンドラーを追加し、削除しないことexpandClickです。collapseClick

$これは私があなたのコードを書き直すものです。なぜあなたが通り過ぎているのかわかりません

$(document).ready(function() {
    // Cache your variables instead of looking them up every time
    var expandButton =  $("#expand-button"),
        outerContainer =  $("#outer-container");

    function expandClick() {
        outerContainer.animate({ "height": "350" }, 500);
        expandButton.html("^");
        // Remove the previous handler
        expandButton.off('click', expandClick );
        // Bind the new handler
        expandButton.bind("click", collapseClick);
    };

    function collapseClick() {
       outerContainer.animate({ "height": "50" }, 500);
       expandButton.html("V");
        // Remove the previous handler
       expandButton.off('click', collapseClick);
        // Bind the new handler
       expandButton.bind("click", expandClick);
    }

    expandButton.bind('click', expandClick);
    // What is this????
    //document.getElementById("#expand-button").bind("click", expandClick($));
});
于 2012-10-30T18:51:31.003 に答える
-1

使用する代わりに:

$(document).ready(function() {
    $("#expand-button").bind('click', expandClick($));
    document.getElementById("#expand-button").bind("click", expandClick());
});

試す

<button id="expand-button" class="btn-success"
data-toggle="collapse" data-target="#expandable" 
onclick="expandClick($)">V</button>

また

function expandClick($) {
    $("#outer-container").animate({ "height": "350" }, 500);
    $("#expand-button").html("^");
    $("#expand-button").unbind("click", expandClick());
    $("#expand-button").bind("click", collapseClick());
};

function collapseClick($) {
    $("#outer-container").animate({ "height": "50" }, 500);
    $("#expand-button").html("V");
    $("#expand-button").unbind("click", collapseClick());
    $("#expand-button").bind("click", expandClick());
}
于 2012-10-30T18:52:19.707 に答える