Jquery - 如何在一个页面上进行多次切换？

Question

我是Jquery的新手,我能够整理一个简单的切换脚本.但我很失望地发现它不能在一个页面上使用多个切换.

我可能会有多达20次切换.

1. 有没有办法让这项工作没有为每个切换创建一个新的点击功能？

2. 现在,当您将光标放在切换触发器上时,它不会变成一只手.我怎么把光标变成手？

这是代码:

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#toggle-trigger").click(function() {
        $("#toggle-wrap").toggle('slow');
    });
});
</script>

<p><a id="toggle-trigger">Click to toggle</a><p>
<div id="toggle-wrap">
    <div class="style-single">
        Random Text
    </div>
</div>


<p><a id="toggle-trigger">Click to toggle 2</a><p>
<div id="toggle-wrap">
    <div class="style-single">
        This doesn't work :(
    </div>
</div>

Answer 1

Ian的答案有效,但您可以使用它来避免修改HTML标记.您还必须将所有ID(#)更改为类(.).

$(document).ready(function() {
    $(".toggle-trigger").click(function() {
        $(this).parent().nextAll('.toggle-wrap').first().toggle('slow');
    });
});

完整的工作示例可在http://jsfiddle.net/sYPWN获得

需要注意的一点是:如果您确实更改了HTML标记,则可能会破坏您的jQuery代码.例如,如果将toggle-trigger包装在另一个div中,则需要将jQuery更改为.parent().parent()(请参阅http://jsfiddle.net/Xmvxf/1/第一个切换如何工作,但第二个没有)

我相信你明白了,所以你应该能够修改它以满足你的需求.