Jquery内容滑块,如何复制无冗余代码

Jquery content slider, how to duplicate without redundant code

本文关键字:复制 代码 冗余 何复制 Jquery      更新时间:2023-09-26

我可以在这个页面上添加一个额外的滑块而不添加重复的函数和额外的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/

你可以这样做-

<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");
    });
});
<<p> jsFiddle演示/strong>

第二部分

修改代码:

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

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