jquery - jquery 动态幻灯片切换

Question

我正在使用 SilverStrips CMS。我的目标是创建一系列动态的 div，这些 div 一开始是折叠的，并且有用于展开它们的链接。我正在尝试使用 jQuery slideToggle() 函数，但在让它以函数形式正常工作时遇到问题。这就是我所拥有的。

头部标签：

$(document).ready(function(){
    (function($){
        $.fn.collapse = function(itemid){
            $(itemid).slideToggle();
        };
    })(jQuery);
});

我已经将链接设置为有一个 onclick 事件，该事件使用动态生成的 id 调用函数 collapse()，如下所示：

<h3><a href"javascript:void(0)" onclick="collapse(div#itemid)">$Title</a></h3>

我不确定我是否正确格式化了我的函数。

Answer 1

您创建该函数的方式，您需要像这样调用它：

$("any selector here").collapse("div#itemid")

这可能不是您想要的。相反，试试这个：

    $.fn.collapse = function(){
        $(this).slideToggle();
    };

然后可以这样调用：

$('div#itemid').collapse()

http://jsbin.com/ozacoq/1/edit

---

理想情况下，您还应该考虑不要内联附加处理程序。像这样的东西：

$("a.somelink").click(function(){
    $('div#itemid').collapse();
});

Answer 2

我认为你的问题出在这里

<h3><a href"javascript:void(0)" onclick="collapse(div#itemid)">$Title</a></h3>

我相信应该是

<h3><a href="javascript:void(0)" onclick="collapse('div#itemid')">$Title</a></h3>

确保您的初始 CSS 没有

{height:0px;}

它应该有

{display:none;}

相反，否则切换将不知道将高度切换到什么。

---

另外，为什么不这样创建你的函数呢？

$(document).ready(function(){

    function collapse(itemid){
        $(itemid).slideToggle();
    };

});