Question

我有菜单和子菜单：

$( ".my-menu ul li.has-children" ).on('mouseenter', function() {
    $(this).children('.sub-menu').show().delay(1000).fadeOut();    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-menu">
    <ul>
        <li class="has-children">
            <a href="#">Item 1</a>
            <ul class="sub-menu">
                <li>
                   <a href="">Subitem 1</a>
                   <ul class="sub-menu">
                        <li><a href="#">EEEEE</a></li>
                   </ul>
                </li>
                <li>Subitem 2</li>
            </ul>
        </li>
        <li>Item 2</li>
        ....
    </ul>
</div>

此显示子菜单有延迟。但是当我将鼠标悬停在他的物品上时，为什么呢？当光标在菜单或子菜单上时，我总是需要显示菜单和子菜单。

Answer 1

使用两个功能用于显示

$( ".my-menu ul li.has-children" ).on('mouseenter', function() {
    $(this).children('.sub-menu').show().delay(1000);   
});

隐藏

$( ".my-menu ul li.has-children" ).on('mouseleave', function() {
    $(this).children('.sub-menu').fadeOut();    
});

Answer 2

使用jQuery hover，它接受两个功能：第一个用于mouseenter，第二个用于mouseleave。这是一个示例：

$( ".my-menu ul li.has-children" ).hover(
  function() {
    $(this).children('.sub-menu').show()   
  },
  function() {
    $(this).children('.sub-menu').delay(1000).fadeOut();
  }
);

Answer 3

$(".my-menu ul li.has-children").on('mouseenter', function () {
    $(this).children('.sub-menu').show();
});
$(".sub-menu").on('mouseleave', function () {
    $(this).fadeOut();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-menu">
    <ul>
        <li class="has-children">
            <a href="#">Item 1</a>
            <ul class="sub-menu">
                <li>Subitem 1</li>
                <li>Subitem 2</li>
            </ul>
        </li>
        <li>Item 2</li>
        ....
    </ul>
</div>

Answer 4

将mouseenter和mouseleave与fadeIn和fadeOut一起使用不要忘记设置.sub-menu style =“ display：none”

$( ".my-menu ul li.has-children" ).on('mouseenter', function() {
    $(this).children('.sub-menu').fadeIn();    
});
$( ".my-menu ul li.has-children" ).on('mouseleave', function() {
    $(this).children('.sub-menu').fadeOut();    
});

Answer 5

您可以像这样更新

$( ".my-menu ul li.has-children" ).on('mouseenter', function() {
    $(this).children('.sub-menu').delay(20).show();    
});

$( ".my-menu ul li.has-children" ).on('mouseleave', function() {
    $(this).children('.sub-menu').show().delay(20).fadeOut();    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-menu">
    <ul>
        <li class="has-children">
            <a href="#">Item 1</a>
            <ul style="display: none;" class="sub-menu">
                <li>Subitem 1</li>
                <li>Subitem 2</li>
            </ul>
        </li>
        <li>Item 2</li>
        ....
    </ul>
</div>

显示/隐藏菜单和jQuery子菜单上的延迟

5 个答案: