Nodejs相关问题：鼠标移到二级菜单的时候，上一级菜单的样式会改变（涉及Nodejs前端交互）

Nodejs相关问题：鼠标移到二级菜单的时候，上一级菜单的样式会改变（涉及Nodejs前端交互）

enter image description here

<ul id="globalNav" >
  <li id="gn-home"><a href="">网站首页</a></li>
  <li id="gn-about" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"  class="aa"><a href="" class="bb">关于霖鹰</a>
    <ul>
      <li id="sm-1"><a  href="#">厨房食物垃圾处理器</a></li>
      <li id="sm-22"><a  href="#" class="cc">厨房食物垃圾处理器</a></li>
      <li id="sm-3"><a  href="#">厨房食物垃圾处理器</a></li>
    </ul>
  </li>
  <li id="gn-news"><a href="">新闻中心</a></li>
  <li id="gn-product"><a href="">产品中心</a></li>
  <li id="gn-case"><a href="">应用案例</a></li>
  <li id="gn-service" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)" class="aa"><a href="" class="bb">客户服务</a>
    <ul>
      <li id="sm-1"><a  href="#" class="cc">厨房食物垃圾处理器</a></li>
      <li id="sm-2"><a  href="#">厨房食物垃圾处理器</a></li>
      <li id="sm-3"><a  href="#">厨房食物垃圾处理器</a></li>
    </ul>
  </li>
  <li id="gn-joining"><a href="">招商加盟</a></li>
  <li id="gn-activity" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="">主题活动</a></li>
  <li id="gn-user"><a href="">会员中心</a></li>
  <li id="gn-contact"><a href="">联系我们</a></li>
</ul>
<script type="text/javascript">

//鼠标移到二级菜单的时候，上一级菜单的样式会改变

$("#globalNav li ul li a").hover( function () { $(’.cc’).parent().parent().parent(’.aa’).children(".bb").addClass(“on”); }, function () { $(’.bb’).removeClass(“on”); } ); </script>

功能是可能实现的，如图所示，可是当我鼠标移到二级菜单的时候，所有class 是bb 的都会加上on样式。我只要当前二级菜单的上一级菜单的样式变掉，又不想写很多重复的代码每个菜单项都用ID来定义。


3 回复

针对您的需求，我们可以使用 jQuery 来处理鼠标悬停事件，并且只改变当前上一级菜单的样式，而不是所有的。以下是修改后的 HTML 和 JavaScript 代码：

HTML 结构

<ul id="globalNav">
  <li id="gn-home"><a href="">网站首页</a></li>
  <li id="gn-about" class="aa"><a href="" class="bb">关于霖鹰</a>
    <ul>
      <li id="sm-1"><a href="#">厨房食物垃圾处理器</a></li>
      <li id="sm-22"><a href="#" class="cc">厨房食物垃圾处理器</a></li>
      <li id="sm-3"><a href="#">厨房食物垃圾处理器</a></li>
    </ul>
  </li>
  <li id="gn-news"><a href="">新闻中心</a></li>
  <li id="gn-product"><a href="">产品中心</a></li>
  <li id="gn-case"><a href="">应用案例</a></li>
  <li id="gn-service" class="aa"><a href="" class="bb">客户服务</a>
    <ul>
      <li id="sm-1"><a href="#" class="cc">厨房食物垃圾处理器</a></li>
      <li id="sm-2"><a href="#">厨房食物垃圾处理器</a></li>
      <li id="sm-3"><a href="#">厨房食物垃圾处理器</a></li>
    </ul>
  </li>
  <li id="gn-joining"><a href="">招商加盟</a></li>
  <li id="gn-activity" class="aa"><a href="">主题活动</a></li>
  <li id="gn-user"><a href="">会员中心</a></li>
  <li id="gn-contact"><a href="">联系我们</a></li>
</ul>

JavaScript 代码

$(document).ready(function() {
  $("#globalNav li ul li a").hover(
    function() {
      // 找到当前悬停的 a 标签的父元素 ul，再找到它的父元素 li，然后找到这个 li 的父元素 li（即上一级菜单的 li），最后给这个 li 的 a 标签添加 "on" 类。
      $(this).parent().parent().parent().prev("li").find(".bb").addClass("on");
    },
    function() {
      // 鼠标离开时移除 "on" 类
      $(this).parent().parent().parent().prev("li").find(".bb").removeClass("on");
    }
  );
});

解释

  1. HTML 结构：

    • 我们保持了原始的 HTML 结构，只是去掉了 onmouseover 和 onmouseout 属性。

  2. JavaScript 代码：

    • 使用 $(document).ready() 确保 DOM 完全加载后再执行脚本。
    • 使用 .hover() 方法绑定鼠标进入和离开事件。
    • 在鼠标进入时，找到当前悬停的 <a> 标签的父元素 <ul>，再找到这个 <ul> 的父元素 <li>，接着找到这个 <li> 的父元素 <li>（即上一级菜单的 <li>），最后给这个 <li> 中的 <a> 标签添加 "on" 类。
    • 在鼠标离开时，移除 "on" 类。

这样可以确保每次鼠标悬停在二级菜单上时，只有当前上一级菜单的样式会改变，而不会影响其他菜单项。


阻止冒泡,LZ需恶补Javascript高级第三版

为了实现仅当鼠标悬停在特定二级菜单时，对应的上一级菜单项样式改变的功能，你可以使用jQuery选择器和事件处理函数来实现。下面是改进后的JavaScript代码示例：

<script type="text/javascript">
$(document).ready(function(){
    $("#globalNav > li").hover(
        function () {
            $(this).find('.cc').addClass("on");
        },
        function () {
            $(this).find('.cc').removeClass("on");
        }
    );
});
</script>

<style>
.on {
    /* 定义你的样式 */
    color: red; /* 示例样式 */
}
</style>

在这个示例中，我们使用了#globalNav > li选择器来针对直接子元素li进行操作。当鼠标悬停在某个列表项（包含二级菜单的列表项）上时，它会查找并添加on类到该列表项内的.cc元素的父元素的父元素的兄弟元素（即<a>标签）。当鼠标移出时，移除on类。

注意，这段代码需要与jQuery库一起运行。如果你的应用程序中还没有引入jQuery，你需要先引入jQuery库文件。

这种方法避免了为每个菜单项使用不同的ID，从而减少了代码冗余。

回到顶部