1

ナビゲーション バーが固定サイズで、サブメニューが画面全体に収まるメニューを作成しています。私は財団でこれをやっています。これを実現するために、サブメニューを幅 100% の別の div に配置する必要がありました。

これが私のコードです：

// Script for the NAV BAR submenu

// Puts all submenu items on invisible
$('#submenu div.flyout').hide();

// Starts the hover function
$('ul.nav-bar li').hover(
  function () {
    // Checks which li is hovered
    var index = $("ul.nav-bar li").index(this);
    console.log(index);
    $('#submenu').show();

    // Shows the corresponding sub item
    $('#submenu div.flyout').eq(index).show();
    $('#submenu div.empty').hide();
  },
  function () {
    $('#submenu div.flyout').hide();
        $('#submenu').hide();
  }
);

ナビゲーション バーにリスト項目があります。ホバーすると、リスト項目とナビゲーション バーの外側に div が表示されます。リスト項目を離れると、div が消えます。これは発生するはずです。しかし.. div項目はサブメニューであるはずなので、そのdivの上にマウスを置いたときに表示されたままになり、リスト項目を離れます。

誰かがこれに対する解決策を知っていますか、それともノーゴーですか?

HTMLコード

<!-- Entire Navbar Code -->
    <div class="row">
        <div class="twelve columns">
            <ul class="nav-bar">
                <li class="has-flyout"><a href="#">Nav Item 1</a></li>
                <li class="has-flyout"><a href="#">Nav Item 2</a></li>
                <li class="has-flyout"><a href="#">Nav Item 3</a></li>
            </ul>
      </div>
    </div>

    <div id="submenu">

            <div class="flyout">
                <div class="row">
                    <div class="six columns">
                    <p>Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. </p>
                    </div>
                    <div class="six columns">
                    <p>Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. Dit is neptekst. </p>
                    </div>   
                </div>
            </div>

            <div class="flyout empty">
            </div>

            <div class="flyout">
                <div class="row">
                    <div class="six columns">
                    <p>Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. </p>
                    </div>
                    <div class="six columns">
                    <p>Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. Dit is echte tekst. Dit is echte tekst.  </p>
                    </div>   
                </div>
            </div>

        </div>
4

1 に答える 1

1

新しいメニュー項目がホバーされたときにのみ hide を呼び出すようにコードをリファクタリングします。

closeOpenSub()*注意: 必要な動作に応じて、サブメニュー項目を選択したものを呼び出すこともできます。

デモ

function closeOpenSub() {
    $('#submenu div.flyout').hide();
    $('#submenu').hide();
}


// Starts the hover function
$('ul.nav-bar li').hover(
  function () {
    // Checks which li is hovered
    var index = $("ul.nav-bar li").index(this);
    console.log(index);

    // hide any open submenus
    closeOpenSub();

    $('#submenu').show();
    // Shows the corresponding sub item
    $('#submenu div.flyout').eq(index).show();
    $('#submenu div.empty').hide();
  }
);
于 2013-08-22T15:03:30.900 に答える