Javascript 如果鼠标悬停在div上，则显示菜单

我有下面的菜单，它在hover上层叠，但是我需要添加一些条件检查，比如如果鼠标在div上悬停，那么保持菜单向下滑动

此外，如果鼠标悬停在LI上，则向下查看菜单

正如您所看到的，一旦您离开“div”，它就会向下滑动和向上滑动

我被卡住了。。。我已经尝试了几个小时搜索if语句等，只是语法不正确

---

将其设置为

的子项，则当您离开时，它不会取消该事件

我还应该注意到，从嵌套列表（例如

• 类别
  • 项目

    <ul>
        <li>Category 
            <ul>
                <li>Item</li>
                <li>Item</li>
            </ul>
        </li>
    </ul>
    

    
    类别
    
    项目
    项目
    
    
    
    

    我试着在你的小提琴中摆弄，但是标记和css非常混乱
    正如Rikudo所说的，你应该制作div，它的孩子，这样做容易得多。我已经制作了一个最简单的手风琴骨架。你可以看到
    它可以满足您的所有要求。但是，对于定制和其他方面的问题，我将由您决定。
    当鼠标离开标题div时，您已将hover附加到标题div，悬停效果将丢失。
    就是一个工作示例
    HTML
    如果你问我，当你使用mousehover/mouseenter做这些事情时，它会变得非常混乱。我更喜欢在第一次悬停后使用click事件，这样用户就不会对所有的移动感到恼火

    jQuery(document).ready(function() {
        $('#accordion ul:first-child > li').hover(function() {
            $(this).children("ul").slideToggle('slow');
        });
    
        $('#accordion ul:not(:first-child) > li').click(function(){
            $(this).children("ul").slideToggle('slow');
        });
    });
    

    ---

    你看，我正在使用xsl样式表来创建HTML…如果我发布我的xsl，你能帮我吗？只有在光标位于div上时才调用“Hover”。当你向下移动到菜单项时，你将离开div，因此切换关闭UL。主要是我将悬停附加到LI，并更改了两个其他选择器…Y您将需要整理子菜单项。。。

    jQuery(document).ready(function() {
        $('#accordion ul > li').hover(function() {
            $(this).children("ul").slideToggle('slow');
        });
    });
    

    jQuery(document).ready(function() {
        $('#accordion ul:first-child > li').hover(function() {
            $(this).children("ul").slideToggle('slow');
        });
    
        $('#accordion ul:not(:first-child) > li').click(function(){
            $(this).children("ul").slideToggle('slow');
        });
    });