点击其他链接时，.toggleClass('active')不能删除active类。

Question

我尝试进行一个相当简单的slideToggle，并且使用toggleClass ('active')。它目前可用于自身（切换活动状态），但在单击其他链接时无法移除活动状态。我知道我缺少一些相当简单的东西，想知道是什么。有什么建议吗？

        $('.content').hide();
        $('.expander').click(function(x) {
        $(this).toggleClass('active');
            var toggle = $(this).nextUntil('.expander');
            toggle.slideToggle();
        $('.content').not(toggle).slideUp();
        x.preventDefault();
        });

.expander {background: red; width: 100%; padding: 10px; display: block; margin-bottom: 10px; text-decoration: none;}
.expander.active {background: black;}
.content {display:none;}

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

      <a class="expander" href="#">Link 1</a>
      <div class="content">
        <ul class="list">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
      </div>

    <a class="expander" href="#">Link 2</a>
      <div class="content">
        <ul class="list">
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
        </ul>
      </div>

    <a class="expander" href="#">Link 3</a>
      <div class="content">
        <ul class="list">
          <li>11</li>
          <li>12</li>
          <li>13</li>
          <li>14</li>
          <li>15</li>
        </ul>
      </div>

- user4650164

Answer 1

在切换之前，您只需要从所有具有类expander的元素中删除类active。此外，要在激活元素上进行切换，请检查它是否与类active相关联。

    $('.content').hide();
    $('.expander').click(function(x) {
    var toggleClass = $(this).hasClass('active') ? true : false;
    $('.expander').removeClass('active');    
    if(!toggleClass)
      $(this).toggleClass('active');         
    var toggle = $(this).nextUntil('.expander');
    toggle.slideToggle();
    $('.content').not(toggle).slideUp();
    x.preventDefault();
    });

Example : https://jsfiddle.net/98vbmryj/2/

- DinoMyte

---

完美运行...谢谢。我知道我只是错过了一些简单的东西 :) - user4650164

一个点赞比一句谢谢更好。如果这个回答解决了你的问题，请标记为正确答案。 - Roy

Answer 2

这是一行代码。

$('.expander').click(function(x) {
    $(this).addClass('active').next('.content').slideDown().prev('.expander').siblings('.expander').removeClass('active').next('.content').slideUp();
});

演示：

//$('.content').hide();
$('.expander').click(function(x) {
 $(this).addClass('active').next('.content').slideDown().prev('.expander').siblings('.expander').removeClass('active').next('.content').slideUp();
});

.expander {
  background: red;
  width: 100%;
  padding: 10px;
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
}
.expander.active {
  background: black;
}
.content {
  display: none;
}

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

<a class="expander" href="#">Link 1</a>
<div class="content">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

<a class="expander" href="#">Link 2</a>
<div class="content">
  <ul class="list">
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

<a class="expander" href="#">Link 3</a>
<div class="content">
  <ul class="list">
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
  </ul>
</div>

- Roy