I have a nav menu that needs to trigger with clicks rather than hovers. When the links are clicked, an `.open` class would be added to the parent `li`. If that parent already has the `.open` class, then it would get removed. It would also be removed if another link is clicked on. So far I can get the class added when clicked and removed when a sibling is clicked, but not removed when it's already `.open`.

I tried adding a `hasClass` conditional, but that didn't work either. Seemed like it reruns the function every time it's clicked and therefore ignores the hasClass conditional.

Can anyone provide help? I tried `toggleClass`, but that didn't work.

```js
$('li a').on('click', function() {
    $('li a').parent().removeClass('open');
    $(this).parent().addClass('open');
});
```

```css
ul {
  list-style: none;
}

li {
  display: inline-block;
  padding: 10px;
}

.open {
  background-color: yellow;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a href="#">Item 1</a>
    </li>
    <li>
      <a href="#">Item 1</a>
    </li>
  </ul>
</nav>
```