如何在使用jquery单击子菜单时更改主菜单颜色

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<ul class="main-menu">
  <li class="menu-item">主菜单1
    <ul class="sub-menu">
      <li>子菜单1</li>
      <li>子菜单2</li>
    </ul>
  </li>
  <li class="menu-item">主菜单2
    <ul class="sub-menu">
      <li>子菜单3</li>
      <li>子菜单4</li>
    </ul>
  </li>
</ul>

$(document).ready(function() {
  $('.sub-menu li').click(function() {
    $('.menu-item').css('color', 'red');
  });
});