javascript - Jquery Accordion 在点击时填充一个圆圈

Question

我希望点击 Accordion 时圆圈被填充，现在已经在运行了，但是当我移动到另一个 Accordion 时，前一个 Accordion 中的圆圈仍然是填充的，怎么可能不发生？

$('.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>

Demo

谢谢。

Answer 1

您与现有代码非常接近。您只需要从所有 .toggle 元素中删除 .active 类，然后再将其设置在被点击的元素上。

如果相同的 .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>