活跃的手风琴

Question

将此脚本用于手风琴。但是当按钮处于活动状态时，我找不到如何更改accordionButton的颜色。

JS

$(document).ready(function() {

$('.accordionButton').click(function() {

    $('.accordionButton').removeClass('on');

    $('.accordionContent').slideUp('normal');

    if ($(this).next().is(':hidden') == true) {

        $(this).addClass('on');

        $(this).next().slideDown('normal');
    }

});

$('.accordionContent').hide();
$(".accordionContent").first().show();

});

CSS

.accordionButton {
color: #fff;
text-transform: uppercase;
font-variant: normal;
background-color: #51a429;
padding: 2px 2px 2px 5%;
cursor: pointer;
border-bottom: 5px solid #f5f5f5 
}

.accordionButton:hover {
background-color: #1b3281 
}

.accordionContent {
padding: 4% 5% 2% 0% 
}

感谢。

Answer 1

您的手风琴的工作方式是将.on类添加到当前打开的手风琴选项卡的按钮中。因此，我认为这就是你的意思：

.accordionButton.on {
  background-color: yellow;
}

如果您想要点击该按钮的那一刻，那么这将解决问题：

.accordionButton:active {
  background-color: red;
}

您可以在下面的代码段中看到这些行为。

$(document).ready(function() {
  $('.accordionButton').click(function() {
    $('.accordionButton').removeClass('on');
    $('.accordionContent').slideUp('normal');
    if ($(this).next().is(':hidden') == true) {
      $(this).addClass('on');
      $(this).next().slideDown('normal');
    }
  });

  $(".accordionButton").first().addClass('on');
  $('.accordionContent').hide();
  $(".accordionContent").first().show()
});

.accordionButton {
  color: #fff;
  text-transform: uppercase;
  font-variant: normal;
  background-color: #51a429;
  padding: 2px 2px 2px 5%;
  cursor: pointer;
  border-bottom: 5px solid #f5f5f5
}
.accordionButton:hover {
  background-color: #1b3281
}
.accordionButton:active {
  background-color: red;
}
.accordionButton.on {
  background-color: yellow;
}
.accordionContent {
  padding: 4% 5% 2% 0%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion-container" class="f-ms">
  <div id="accordion-link-1" class="accordionButton">
    <p class="f-fp f-lp">TEST</p>
  </div>
  <!-- end accordion-link-1 -->
  <div id="accordion-1" class="accordionContent">
    <div id="accordion-title-1" class="f-ms">
      <h1 class="f-fp">Global deals </h1>
      <p><span class="size13">Select tile for details</span>
      </p>
      <p class="f-lp"><span class="buttonBlue"><a href="#">CLICK HERE TO GO TO  </a></span>
      </p>
    </div>
    <!-- end accordion-title-1 -->
    <div id="accordion-content-1" class="f-ms flex-container">
      <a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087">
        <div id="accordion-1-tile-1" class="flex-grow-1 box-shadow">
          <a href="">
            <img id="m12" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
          </a>
        </div>
        <!-- end accordion-1-tile-1 -->
      </a>
      <a href="">
        <div id="accordion-1-tile-2" class="flex-grow-1 box-shadow">
          <a href="https://www.google.com/tombstone.png?type=thumbnail&did=101982">
            <img id="m13" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
          </a>
        </div>
        <!-- end accordion-1-tile-2 -->
      </a>
      <a href="https://www.google.com/tombstone.png?type=thumbnail&did=101">
        <div id="accordion-1-tile-3" class="flex-grow-1 box-shadow">
          <a href="">
            <img id="m14" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
          </a>
        </div>
        <!-- end accordion-1-tile-3 -->
      </a>
    </div>
    <!-- end accordion-content-1 -->
  </div>
  <!-- end accordion-1 -->
  <div id="accordion-link-2" class="accordionButton">
    <p class="f-fp f-lp">TEST</p>
  </div>
  <!-- end accordion-link-2 -->
  <div id="accordion-2" class="accordionContent">
    <div id="accordion-title-2" class="f-ms">
      <h1 class="f-fp">Global deals </h1>
      <p><span class="size13">Select tile for details</span>
      </p>
      <p class="f-lp"><span class="buttonBlue"><a href="#">CLICK HERE TO GO TO  </a></span>
      </p>
    </div>
    <!-- end accordion-title-2 -->
    <div id="accordion-content-2" class="f-ms flex-container">
      <a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087">
        <div id="accordion-2-tile-1" class="flex-grow-1 box-shadow">
          <a href="">
            <img id="m15" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
          </a>
        </div>
        <!-- end accordion-2-tile-1 -->
      </a>
      <a href="">
        <div id="accordion-2-tile-2" class="flex-grow-1 box-shadow">
          <a href="">
            <img id="m16" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
          </a>
        </div>
        <!-- end accordion-2-tile-2 -->
      </a>
      <a href="">
        <div id="accordion-2-tile-3" class="flex-grow-1 box-shadow">
          <a href="">
            <img id="m17" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
          </a>
        </div>
        <!-- end accordion-2-tile-3 -->
      </a>
    </div>
    <!-- end accordion-content-2 -->
  </div>
  <!-- end accordion-2 -->
  <div id="accordion-link-3" class="accordionButton">
    <p class="f-fp f-lp">TEST</p>
  </div>
  <!-- end accordion-link-3 -->
  <div id="accordion-3" class="accordionContent">
    <div id="accordion-title-3" class="f-ms">
      <h1 class="f-fp">Global deals</h1>
      <p><span class="size13">Select tile for details</span>
      </p>
      <p class="f-lp"><span class="buttonBlue"><a href="#">CLICK HERE TO GO TO  </a></span>
      </p>
    </div>
    <!-- end accordion-title-3 -->
    <div id="accordion-content-3" class="f-ms flex-container">
      <a href="">
        <div id="accordion-3-tile-1" class="flex-grow-1 box-shadow">
          <a href="">
            <img id="m18" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
          </a>
        </div>
        <!-- end accordion-3-tile-1 -->
      </a>
      <a href="">
        <div id="accordion-3-tile-2" class="flex-grow-1 box-shadow">
          <a href="">
            <img id="m19" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
          </a>
        </div>
        <!-- end accordion-3-tile-2 -->
      </a>
      <a href="">
        <div id="accordion-3-tile-3" class="flex-grow-1 ">
          <a href="">
            <img id="m20" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
          </a>
        </div>
        <!-- end accordion-3-tile-3 -->
      </a>
    </div>
    <!-- end accordion-content-3 -->
  </div>
  <!-- end accordion-3 -->
  <div id="accordion-link-4" class="accordionButton">
    <p class="f-fp f-lp">TEST</p>
  </div>
  <!-- end accordion-link-4 -->
  <div id="accordion-4" class="accordionContent">
    <div id="accordion-title-4" class="f-ms">
      <h1 class="f-fp">Global deals</h1>
      <p><span class="size13">Select tile for details</span>
      </p>
      <p class="f-lp"><span class="buttonBlue"><a href="#">CLICK HERE TO GO TO  </a></span>
      </p>
    </div>
    <!-- end accordion-title-4 -->
    <div id="accordion-content-4" class="f-ms flex-container">
      <a href="">
        <div id="accordion-4-tile-1" class="flex-grow-1 box-shadow">
          <a href="">
            <img id="m21" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
          </a>
        </div>
        <!-- end accordion-4-tile-1 -->
      </a>
      <a href="">
        <div id="accordion-4-tile-2" class="flex-grow-1 ">
          <a href="">
            <img id="m22" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
          </a>
        </div>
        <!-- end accordion-4-tile-2 -->
      </a>
      <a href="">
        <div id="accordion-4-tile-3" class="flex-grow-1 box-shadow">
          <a href="">
            <img id="m23" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
          </a>
        </div>
        <!-- end accordion-4-tile-3 -->
      </a>
    </div>
    <!-- end accordion-content-4 -->
  </div>
  <!-- end accordion-4 -->
  <div id="accordion-link-5" class="accordionButton">
    <p class="f-fp f-lp">TEST</p>
  </div>
  <!-- end accordion-link-5 -->
  <div id="accordion-5" class="accordionContent">
    <div id="accordion-title-5" class="f-ms">
      <h1 class="f-fp">Global deals</h1>
      <p><span class="size13">Select tile for details</span>
      </p>
      <p class="f-lp"><span class="buttonBlue"><a href="#">CLICK HERE TO GO TO  </a></span>
      </p>
    </div>
    <!-- end accordion-title-5 -->
    <div id="accordion-content-5" class="f-ms flex-container">
      <a href="">
        <div id="accordion-5-tile-1" class="flex-grow-1 box-shadow">
          <a href="">
            <img id="m24" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
          </a>
        </div>
        <!-- end accordion-5-tile-1 -->
      </a>
      <a href="">
        <div id="accordion-5-tile-2" class="flex-grow-1 box-shadow">
          <a href="">
            <img id="m25" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
          </a>
        </div>
        <!-- end accordion-5-tile-2 -->
      </a>
      <a href="">
        <div id="accordion-5-tile-3" class="flex-grow-1 box-shadow">
          <a href="">
            <img id="m26" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
          </a>
        </div>
        <!-- end accordion-5-tile-3 -->
      </a>
    </div>
    <!-- end accordion-content-5 -->
  </div>
  <!-- end accordion-5 -->

</div>