Question

我正在尝试做一个非常简单的slideToggle，以及toggleClass（＆＃39; active＆＃39;）。它目前可以自行工作（切换活动），但是当我点击其他链接时，它不会被激活。我知道我错过了一些相当简单的东西，并想知道它是什么。有什么建议吗？

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

在切换之前，您只需要从类active的所有元素中删除类expander。此外，要切换活动元素，请检查它是否与其关联的类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/

.toggleClass（＆＃39; active＆＃39;）在单击其他链接时不删除活动状态

1 个答案: