Question

我一直在学习一些教程来学习创建自己的插件的基础知识..但它似乎没有用。

我尝试做的只是创建一个基本幻灯片切换下拉菜单（单击一次以显示div - 再次单击以折叠它）

我拥有的插件内容：

$(document).ready(function () {

    (function ($) {
        $.fn.dropdown = function () {
            $.fn.dropdown = function () {
                this.preventDefault();
                $('.expanded').slideToggle(1000);
            }
            return this;
        };
    }(jQuery));
});

我的HTML是：

<div class="Btn">Click Here</div>
<div class="expanded">
Here<br/>
Is<br/>
Some<br/>
Extra<br/>
Content<br/>
</div>

要执行插件，我有：

$( ".Btn" ).click(function() {
dropdown();
});

如果有人可以帮助我解决我出错的地方，我们将不胜感激。

由于

Answer 1

要执行插件，应该是：

$( ".Btn" ).click(function() {
    $(this).dropdown();
});

Answer 2

This是一个有效的缩减版本。

有些事情，由于某种原因，你将$.fn.dropdown包裹在$.fn.dropdown内，不知道为什么，但我删除了它。此外，jQuery函数不像普通的javascript函数那样工作，它们需要事先$().，因为它们在jQuery的范围内。最后this.preventDefault在这种情况下不会做任何事情，因为没有默认值。

Answer 3

查看这个jsfiddle：http://jsfiddle.net/yvanavermaet/sc6Bw/1/

$( document ).ready(function() {
    $( ".Btn" ).click(function() {
        $(this).dropdown();
    });
});

(function( $ ) {
    $.fn.dropdown = function() {
        $('.expanded').slideToggle(1000);

        return this;
    };
}( jQuery ));

正如有些人所说：

两次不定义$ .fn.dropdown
不要在您的document.ready中定义它（您应该将其视为一个单独的模块）
使用$（selector）。dropdown（）;
e.preventDefault（）对div没有太大影响，因为它没有默认值。

修改：顺便说一句，尝试遵循1编码标准。添加点击事件时，您使用的是双引号，在添加slideToggle时，您使用的是单引号。以及空间。

创建我自己的插件 - 不工作

3 个答案: