Question

我在悬停时遇到jQuery slideToggle的问题。假设我在导航容器中有2个导航项。每个都有自己的子菜单项。一切都工作正常，但如果有人开始“猴子测试”它，那么出现一些问题。其中之一，当鼠标不在导航容器（global $post; $post = get_post(123); setup_postdata($post); get_template_part( 'content', get_post_format() );）上时，菜单仍处于打开状态。

HTML：

<nav>

这里是JS文件（部分）：

<nav>
    <ul class="navigation lvl-1">
        <li>
            Menu1
            <ul class="sub-menu lvl-2">
                <li>Submenu1-1</li>
                <li>Submenu1-2</li>
            </ul>
        </li>
        <li>
            Menu2
            <ul class="sub-menu lvl-2">
                <li>Submenu2-1</li>
                <li>Submenu2-2</li>
            </ul>
        </li>
    </ul>
</nav>

Answer 1

试试这个

$('nav ul li').hover(function () {
    $(this).children('ul').slideToggle(300);
});

nav ul li ul{
  display:none;
  }

nav ul{
  display:inline-block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<nav>
    <ul class="navigation lvl-1">
        <li>
            Menu1
            <ul class="sub-menu lvl-2">
                <li>Submenu1-1</li>
                <li>Submenu1-2</li>
            </ul>
        </li>
        <li>
            Menu2
            <ul class="sub-menu lvl-2">
                <li>Submenu2-1</li>
                <li>Submenu2-2</li>
            </ul>
        </li>
    </ul>
</nav>

Jquery悬停下拉菜单关闭问题

1 个答案: