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

2

改变这个：

var header_name = ("Parent A", "Parent B", "Parent C", "Parent D");

对此

var header_name = ["Parent A", "Parent B", "Parent C", "Parent D"];

同样与下一个变量

于 2013-10-23T01:43:14.943 回答
2

您需要为循环的每次迭代创建 x 的本地副本。最简单的方法是创建一个辅助函数，例如getClickHandler：

function getClickHandler(x) {
    return function(e){
            if(toggleState){
                $("#" + child_name[x]).show("slide");
            }else{
                $("#" + child_name[x]).hide("slide");
            }
            toggleState = !toggleState;
          };
}

for(var x = 0; x < header_name.length; x++){
    $("#" + header_name[x]).click(getClickHandler(x));
}

这里的关键点是里面的函数在click稍后的时间（异步）运行。由于变量范围在 Javascript 中的工作方式，您的代码将相同的引用传递x给每个处理程序，这就是为什么它们最终都会获得数组的最后一次迭代。执行上述操作会x在当前迭代中创建一个副本，并将其存储在本地引用中（在处理函数内部）。

于 2013-10-23T01:43:36.800 回答
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();
    })
});

演示：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 回答