I create a menu & want to when click on li children just child set .active class no li parent

(Use in enfold WordPress theme)

```js
$('#mobile-advanced li.menu-item-has-children').on('click', function () {
   $(this).toggleClass('active');
});

// just for test
$('a').on('click', function (e) {
    e.preventDefault() ;
});
```

```css
li.active{
  background-color: #FFB94B;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="mobile-advanced">
  <li class="menu-item menu-item-has-children">
    <a href="">T 1</a>
    <ul>
      <li class="menu-item menu-item-has-children">
        <a href="">T11</a>
        <ul>
          <li class="menu-item"><a href="">T111</a></li>
          <li class="menu-item"><a href="">T112</a></li>
        </ul>
      </li>
      <li class="menu-item"><a href="">T12</a></li>
      <li class="menu-item"><a href="">T13</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="">T 2</a>
  </li>
</ul>
```

for example, when I click li children li parent set active class
[![Screenshot](https://i.stack.imgur.com/ggKbQ.png)](https://i.stack.imgur.com/ggKbQ.png)