以下のコードを作成して、2 つのボタンを ID の要素に動的にロードしましたmasthead
。次に、showMenus
各ボタンがクリックされると呼び出される関数が実行され、いくつかの jQuery アニメーションが実行されます。すべてが RequireJS モジュール内にラップされています。
コードはそのままで問題なく動作しますが、ページにボタンをロードするモジュールと機能を実行するモジュールの 2 つの個別の RequireJS モジュール/ファイルに分割する方がよいと考えていますshowMenus
。RequireJS API ドキュメントを参照しましたが、答えが見つかりませんでした。
どんな助けでも大歓迎です...事前に感謝します!
require(['jquery'], function ($) {
var header = document.getElementById("masthead"),
$navMenu = $("#site-navigation-list"),
$searchBox = $("#searchform"),
menuButton = document.createElement("div"),
searchButton = document.createElement("div"),
showMenus;
$(menuButton).attr("id", "menu");
$(searchButton).attr("id", "search");
header.appendChild(searchButton);
header.appendChild(menuButton);
// break the code below into its on RequireJS module?
showMenus = function(btn,el) {
$(btn).click(function() {
if (el.is(":visible") ) {
el.slideUp({
complete:function(){
$(this).css("display","");
}
});
} else {
el.slideDown();
}
});
};
showMenus(menuButton, $navMenu);
showMenus(searchButton, $searchBox);
});