Question

我正在构建一个导航栏固定大小的菜单，子菜单适合整个屏幕。我在基金会这样做。为了达到这个目的，我不得不将子菜单放在一个宽度为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>

Answer 1

将代码重构为仅在新菜单项悬停时调用hide：

*注意：根据您的行为，您可能还需要调用closeOpenSub()用户选择子菜单项的内容。

Demo

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();
  }
);

将“悬停”传递给其他div

1 个答案: