jquery隐藏/显示子菜单，同时保持第一个子菜单与主菜单一起处于活动状态

<div class="menu">
  <ul class="main-menu">
    <li class="active">菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
  </ul>
  <ul class="sub-menu">
    <li>子菜单1</li>
    <li>子菜单2</li>
    <li>子菜单3</li>
  </ul>
</div>

.sub-menu {
  display: none; /* 初始隐藏子菜单 */
}
.active {
  color: red; /* 活动状态样式 */
}

$(document).ready(function() {
  // 默认显示第一个子菜单
  $('.sub-menu li:first-child').addClass('active');
  
  // 点击主菜单时切换子菜单的显示/隐藏状态，并保持活动状态
  $('.main-menu li').click(function() {
    $('.sub-menu').slideToggle();
    $(this).toggleClass('active');
    $('.sub-menu li:first-child').addClass('active');
  });
});