<ul class="menu">
    <li>
      <h3>選單1</h3>
    </li>
    <li>
      <h3>選單2</h3>
    </li>
    <li>
      <h3>選單3</h3>
    </li>
    <li>
      <h3>選單4</h3>
    </li>
    <li>
      <h3>選單5</h3>
    </li>
    <li>
      <h3>選單6</h3>
    </li>
  </ul>

body {
  box-sizing: border-box;
}

.menu {
  width: 500px;
  margin: 0 auto;
  margin-top: 10px;
  li {
    border: 1px solid gray;
    padding: 5px;
    margin-bottom: 10px;
    &:hover {
      background-color: #eeeeee;
      cursor: pointer;
    }
    h3 {
      display: inline-block;
      &.active {
        color: red;
        cursor: pointer;
      }
    }
  }
}

$(function () {
  $(".menu li").click(function (e) {
    e.preventDefault();
    $(this).find("h3").toggleClass("active");
  });
});