JQuery accordioin с заполнить круг на клике

Question

Я хочу, чтобы при щелчке по аккордеону круг был заполнен, но сейчас он уже запущен, но когда я перехожу к другому аккордеону, круг в предыдущем аккордеоне все еще заполнен, как это может не произойти?

$('.toggle').click(function(e) {
  e.preventDefault();

  var $this = $(this);

  $this.toggleClass('active');

  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.next().slideUp(360);
  } else {
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(360);
    $this.next().toggleClass('show');
    $this.next().slideToggle(360);
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

ul,
li {
  list-style-type: none;
}

ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}

ul .inner.show {
  border: 1px solid #DDE0E7;
  margin: 0;
  padding: 15px;
  color: #fff;
  /*display: block;*/
}

ul.accordion2 li {
  margin: 0.5em 0;
}

ul.accordion2 li a.toggle {
  display: block;
  background: white;
  color: #000;
  font-weight: bold;
  padding: 0.75em;
  border: 1px solid #DDE0E7;
  border-radius: 0.15em;
  transition: background 0.3s ease;
  text-decoration: none;
}

ul.accordion2 li a.toggle:hover {
  background: #eee;
}

ul.accordion2 li a.toggle::before {
  content: '';
  vertical-align: middle;
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background-color: #B1B5BE;
  margin-right: .95rem;
}

ul.accordion2 li a.active.toggle::before {
  background-color: #EB7955;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<ul class="accordion2">
  <li>
    <a class="toggle" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Item 1</li>
    </ul>
  </li>
  <li>
    <a class="toggle" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Item 2</li>
    </ul>
  </li>
  <li>
    <a class="toggle" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>Item 3</li>
    </ul>
  </li>
</ul>

Демо

Спасибо.

Answer 1

Вы были очень близки с существующим кодом.Вам просто нужно было удалить класс .active из всех элементов .toggle, прежде чем устанавливать его на элемент, по которому щелкнули.

Я также изменил код, чтобы удалить активный класс, если тот же элемент .toggle закрыт.

$('.toggle').click(function(e) {
  e.preventDefault();

  var $this = $(this);
  var isActive = $this.hasClass('active');

  $('.toggle').removeClass('active');
  $this.toggleClass('active', ! isActive);

  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.next().slideUp(360);
  } else {
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(360);
    $this.next().toggleClass('show');
    $this.next().slideToggle(360);
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

ul,
li {
  list-style-type: none;
}

ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}

ul .inner.show {
  border: 1px solid #DDE0E7;
  margin: 0;
  padding: 15px;
  color: #fff;
  /*display: block;*/
}

ul.accordion2 li {
  margin: 0.5em 0;
}

ul.accordion2 li a.toggle {
  display: block;
  background: white;
  color: #000;
  font-weight: bold;
  padding: 0.75em;
  border: 1px solid #DDE0E7;
  border-radius: 0.15em;
  transition: background 0.3s ease;
  text-decoration: none;
}

ul.accordion2 li a.toggle:hover {
  background: #eee;
}

ul.accordion2 li a.toggle::before {
  content: '';
  vertical-align: middle;
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background-color: #B1B5BE;
  margin-right: .95rem;
}

ul.accordion2 li a.active.toggle::before {
  background-color: #EB7955;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<ul class="accordion2">
  <li>
    <a class="toggle" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Item 1</li>
    </ul>
  </li>
  <li>
    <a class="toggle" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Item 2</li>
    </ul>
  </li>
  <li>
    <a class="toggle" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>Item 3</li>
    </ul>
  </li>
</ul>