如何根据href修改导航栏父元素li和ul的CSS属性？

导航栏HTML结构 #

<li>
  <a href="#Menu_20" title="Accounting">
    <i class="fa fa-money fa-lg"></i><strong>Accounting</strong>
  </a>
  <ul>
    <li>
      <a href="#Menu_21">
        <i class="fa fa-plus-square fa-lg"></i>Income
      </a>
      <ul>
        <li><a href="#Menu_49"><i class="fa fa-gift fa-lg"></i>Customers</a></li>
        <li><a href="#Menu_50"><i class="fa fa-gift fa-lg"></i>Aged Analysis</a></li>
        <li><a href="#Menu_51"><i class="fa fa-gift fa-lg"></i>Prepayments</a></li>
        <li><a href="#Menu_52"><i class="fa fa-gift fa-lg"></i>Documents</a></li>
      </ul>
    </li>
  </ul>
</li>

现有CSS代码 #

.mcd-menu li ul,
.mcd-menu li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  padding: 0;
  margin: 0;
  background: #FFF;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  z-index: 1000;
  left: 280px;
  top: 0px; /* 默认菜单定位值 */
  border-left: 4px solid #e67e22;
}

.mcd-menu li ul:before {
  content: "";
  position: absolute;
  top: 25px; /* 默认箭头定位值 */
  left: -9px;
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}

当前尝试的jQuery代码 #

$('a[href*="#"]').mouseover(function (event) {
  var href = $(this).attr('href');
  if (href == "#Menu_22") {
    $(this).parent().css({
      "top": "200px;"
    })
  }
})

需求说明 #

目前能通过href定位元素并触发事件，但不知道如何修改对应li和ul的CSS属性。当前用mouseover事件测试效果，后续会替换为document.ready事件。

想要实现的效果：

• 默认状态：使用CSS默认的top:0px（菜单）和top:25px（箭头）
• 调整后状态：将菜单的top改为-200px，箭头的top改为195px，让子菜单上移，提升可读性

解决方案 #

方法：通过添加CSS类控制样式 #

jQuery无法直接修改伪元素（:before）的样式，推荐用添加/移除类的方式实现样式切换，更易维护。

1. 新增CSS类

/* 子菜单上移的样式类 */
.mcd-menu li ul.shifted-up {
  top: -200px;
}
/* 对应调整箭头的位置 */
.mcd-menu li ul.shifted-up:before {
  top: 195px;
}

2. 修改jQuery代码
   根据需求选择事件触发方式：

// 鼠标悬停触发（测试用）
$('a[href="#Menu_22"]').mouseover(function() {
  // 找到当前a标签对应的子菜单ul
  $(this).parent().find('ul').addClass('shifted-up');
}).mouseout(function() {
  // 鼠标移出时恢复默认样式
  $(this).parent().find('ul').removeClass('shifted-up');
});

// 页面加载完成后直接生效（最终替换用）
// $(document).ready(function() {
//   $('a[href="#Menu_22"]').parent().find('ul').addClass('shifted-up');
// });

关键说明 #

• DOM层级定位：确保正确找到目标ul，若子菜单是当前a标签的兄弟元素，可替换为$(this).siblings('ul')；若为父li的子元素，find('ul')或children('ul')都可以。
• 用类控制样式比直接修改行内样式更灵活，还能保留CSS的过渡动画效果。

内容的提问来源于stack exchange，提问作者gchq