jQuery鼠标移动显示二级菜单

Question

这个到底怎么写啊 是拿css写隐藏菜单吗再用jQuery显示还是什么意思 css本身就可以隐藏再显示的情况下jQuery的作用是什么啊

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

确实，你可以使用CSS来隐藏二级菜单，然后使用jQuery来监听鼠标移动事件并显示二级菜单。下面是一个简单的例子来说明如何实现这个功能。

首先，使用CSS来设置二级菜单的初始状态为隐藏：

/* CSS */
.submenu {
    display: none; /* 初始状态下隐藏二级菜单 */
}

然后，在HTML中创建你的菜单结构：

<!-- HTML -->
<ul>
    <li>一级菜单项
        <ul class="submenu"> <!-- 这是二级菜单 -->
            <li>二级菜单项 1</li>
            <li>二级菜单项 2</li>
            <!-- ... 其他二级菜单项 ... -->
        </ul>
    </li>
    <!-- ... 其他一级菜单项 ... -->
</ul>

接下来，使用jQuery来监听鼠标移动事件并显示相应的二级菜单：

// jQuery
$(document).ready(function() {
    $('li').mouseenter(function() { // 当鼠标进入一级菜单项时
        $(this).find('.submenu').show(); // 显示对应的二级菜单
    });
    $('li').mouseleave(function() { // 当鼠标离开一级菜单项时
        $(this).find('.submenu').hide(); // 隐藏对应的二级菜单
    });
});

在这个例子中，当鼠标移动到一级菜单项上时，jQuery会找到对应的二级菜单并显示它。当鼠标离开一级菜单项时，二级菜单会被隐藏。这样就实现了鼠标移动显示二级菜单的功能。CSS主要用于设置初始隐藏状态和其他样式，而jQuery用于处理交互行为。