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();
    };

});

jquery动态slideToggle

2 个答案: