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

重构您的代码以仅在悬停新菜单项时调用隐藏：

*注意：根据您想要的行为，您可能还需要调用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 回答