javascript - Jquery 内容滑块，如何在没有冗余代码的情况下进行复制

Question

我可以在此页面上添加一个额外的滑块而不添加重复的函数和额外的 css 类吗？

我知道如何复制它们没问题，但我希望有人教我重用当前代码的正确方法。

我要猜测一下，说我可能需要“this”关键字。

<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

jsFiddle：http: //jsfiddle.net/chaddly/mR3Vn/

Answer 1

你可以做这样的事情 -

<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>

还有一些翻转的-

<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>

$(document).ready(function () {
    $(".flip").click(function () {
        $(this).next('.panel').slideToggle("slow");
    });
});

jsFiddle 演示

Answer 2

第2部分

修改代码：

$('.panel').hide();    
$(this).next('.panel').slideToggle("slow");

首先隐藏所有面板，然后打开当前单击的面板。