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

-1

我一直在通過一些教程工作學習創造我自己的插件..的基礎知識，但它似乎並沒有工作。創建我自己的插件 - 不工作

我試圖做的僅僅是創建一個基本的滑動切換按鈕，下拉（點擊一次顯示一個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(); 
});

如果有人能幫助我，我去錯在何處，我們將不勝感激。

感謝

來源

2014-04-28 Conrad M

你爲什麼'$ .fn.dropdown'內設置'$ .fn.dropdown'一遍嗎？另外，jQuery插件通常在jQuery對象上調用，而不是通過它們自己。 –

不要在document.ready中定義插件。 – Barmar

要執行插件，它應該是'$（selector）.dropdown（）'。 – Barmar

看看這個的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兩次
沒有在文檔中定義它。就緒（你應該看到它作爲一個獨立的模塊）
使用$（選擇）.dropdown（）;
e.preventDefault（）對div沒有太大的影響，因爲它沒有默認值。

編輯：順便說一句，儘量遵循1編碼標準。添加點擊事件時，您使用雙引號，並在添加slideToggle時使用單引號。與空間一樣。

來源

2014-04-28 22:17:39 yvanavermaet

要執行的插件應該是：

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

來源

2014-04-28 22:13:09 Barmar

This是砍下版本的作品。

有幾件事，由於某種原因，你在$.fn.dropdown裏面包裝了$.fn.dropdown，不知道爲什麼，但我刪除了它。另外jQuery函數不像常規的JavaScript函數那樣工作，他們需要$().，因爲它們在jQuery的範圍內。最後this.preventDefault不會在這方面做任何事情，因爲沒有默認值。

來源

2014-04-28 22:13:28 dotty

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

回答

相關問題