1

私は自分の問題に対処するのに問題があります。私の問題は、静的ナビゲーションを作成していることです。それはトリガーイベントを使用します。シンプルな折りたたみ可能な div を表示しているためです。私がしたことは、すべての ID 名を配列に含め、それをループしてイベントを作成することです。しかし、リンクをクリックすると、jquery イベントが呼び出されません。ナビゲーションのハードコーディングを防ぐ方法はありますか?

ここに私のサンプルコードがあります:

var toggleState = true;
var header_name = ["ParentA", "ParentB", "ParentC", "ParentD"];
var child_name = ["ChildA", "ChildB", "ChildC", "ChildD"];

for (var x = 0; x < header_name.length; x++) {
    $("#" + header_name[x]).click(function (e) {
        if (toggleState) {
            $("#" + child_name[x]).show("slide");
        } else {
            $("#" + child_name[x]).hide("slide");
        }
        toggleState = !toggleState;
    });
}
<div id="ParentA">Click A</div>
<div id="ChildA" style="display: none">Child A</div>
<div id="ParentB">Click A</div>
<div id="ChildB" style="display: none">Child B</div>
<div id="ParentC">Click A</div>
<div id="ChildC" style="display: none">Child C</div>

これがフィドルです：http://jsfiddle.net/rochellecanale/cveze/3/

4

3 に答える 3

1

html に小さな変更を加えることができる場合は、次のように単純にする必要があります。

<div id="ParentA" class="click-toggle" data-target="#ChildA">Click A</div>
<div id="ChildA" style="display: none">Child A</div>
<div id="ParentB" class="click-toggle" data-target="#ChildB">Click B</div>
<div id="ChildB" style="display: none">Child B</div>
<div id="ParentC" class="click-toggle" data-target="#ChildC">Click C</div>
<div id="ChildC" style="display: none">Child C</div>

それから

$(document).ready(function(){
    $('.click-toggle').click(function () {
        $($(this).data('target')).stop(true, true).slideToggle();
    })
});

デモ:フィドル

あるいは

<div id="ParentA" class="click-toggle">Click A</div>
<div id="ChildA" style="display: none">Child A</div>
<div id="ParentB" class="click-toggle">Click B</div>
<div id="ChildB" style="display: none">Child B</div>
<div id="ParentC" class="click-toggle">Click C</div>
<div id="ChildC" style="display: none">Child C</div>

それから

$(document).ready(function(){
    $('.click-toggle').click(function () {
        $(this).next().stop(true, true).slideToggle();
    })
});

Demo: Fiddle、左 -> 右を維持したい場合 スライド: Fiddle

コードを機能させるには...主な問題は共有クロージャー変数の使用ですtoggleState...各メニュー項目には独自の状態変数が必要です...解決策は、それぞれにプライベートクロージャーを作成することです

$(document).ready(function () {
    var header_name = ["ParentA", "ParentB", "ParentC", "ParentD"];
    var child_name = ["ChildA", "ChildB", "ChildC", "ChildD"];
    $.each(header_name, function (idx, id) {
        var toggleState = true;
        $('#' + id).click(function () {
            if (toggleState) {
                $("#" + child_name[idx]).show("slide");
            } else {
                $("#" + child_name[idx]).hide("slide");
            }
            toggleState = !toggleState;
        })
    })
});

デモ:フィドル

于 2013-10-23T02:00:08.520 に答える