ドロップダウンメニュー

InfoTown.MenuのsetToggle呼び出し

var menu_item = $( ".menu--global > li" );
menu_item.each( function ( i ) {
	InfoTown.Menu.setToggle( $( this ), menu_item, i );
} );

IntoTown.Menu

jQuery( function ( $ ) {
	/**
	 * メニューオブジェクト
	 *
	 * メニューの開閉を制御します。
	 * 
	 * @class Menu
	 */
	InfoTown.Menu = (function () {
		/**
		 * サブメニュー開閉設定
		 * 
		 * CSSクラスsubmenuを設定した要素の開閉を制御します。
		 *
		 * @method setToggle
		 * @poublic
		 * @param {jQuery} target マウスオーバーされた要素(HTMLLIElement)のjQueryオブジェクトです。
		 * @param {jQuery} items HTMLLIElementのリスト(jQuery)です。
		 * @param {Number} i itemsの中でのtargetの位置です。
		 * @param {Object} オプション fadeIn, fadeOutへ渡すオプションです。
		 * @returns {Boolean} falseを返します。
		 */
		function setToggle( target, items, i, options ) {
			var initialOptions, submenu, globalmenu;
			target = (target instanceof jQuery) ? target : $( target );
			/* fadeIn, fadeOutへ渡すデフォルトオプション */
			initialOptions = {
				duration: 300,
				ease: "swing"
			};
			options = options || initialOptions;
			/* ターゲットのサブメニュー取得 */
			submenu = target.children( ".submenu" )
			/* グローバルメニュー取得 */
			globalmenu = $(".menu--global");
			/* サブメニュー展開処理 */
			target.bind( "mouseenter", function () {
				var offset;
				/* 一旦全サブメニューを閉じる */
				items.each( function () {
					$( this ).children( ".submenu" ).hide();
				} )
				/* サブメニュー展開 */
				submenu.slideDown( options )
				/* デフォルト・バブリング処理停止 */
				return false;
			} );
			/* マウスリーブ処理 */
			target.bind( "mouseleave", function () {
				submenu.css({
					"display": "none"
				})
				return false;
			} );
		};

		/* パプリッックメソッド */
		return {
			setToggle: setToggle
		}
	}());
} );

IntoTown.Menu.html

<div class="container ">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix">
      <ul class="menu--global clearfix">
        <li>
          メニュー1
          <div class="submenu">
            <ul>
              <li><a href="">サブメニュー1</a></li>
              <li><a href="">サブメニュー2</a></li>
              <li><a href="">サブメニュー3</a></li>
            </ul>
          </div>
        </li>
        <li>
          メニュー2
          <div class="submenu">
            <ul>
              <li><a href="">サブメニュー1</a></li>
              <li><a href="">サブメニュー2</a></li>
              <li><a href="">サブメニュー3</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>