jquery - .toggleClass ('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>

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();
    });

示例:https://jsfiddle.net/98vbmryj/2/