1

以下のコードを作成して、2 つのボタンを ID の要素に動的にロードしましたmasthead。次に、showMenus各ボタンがクリックされると呼び出される関数が実行され、いくつかの jQuery アニメーションが実行されます。すべてが RequireJS モジュール内にラップされています。

コードはそのままで問題なく動作しますが、ページにボタンをロードするモジュールと機能を実行するモジュールの 2 つの個別の RequireJS モジュール/ファイルに分割する方がよいと考えていますshowMenusRequireJS 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);

});
4

1 に答える 1