javascript - 事件状态 Accordion

标签 javascript jquery css

将此脚本用于 Accordion 。但是我找不到如何在按钮处于事件状态时更改 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% 
}

谢谢。

最佳答案

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

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

关于javascript - 事件状态 Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38406176/

上一篇：html - 在 Bootstrap 主题中更改页面的标题

下一篇：javascript - Div 占据视口(viewport)的整个高度，直到滚动到下一个 div

相关文章：

javascript - 如何使用 github.com/1000hz/bootstrap-validator 的自定义验证器

jquery - 是否可以使用YouTube视频自动在页面加载时启动Fancybox，并在结束时自动关闭？

javascript - 使用 jQuery 验证电子邮件

html - 在 Win 7 中的 cygwin 中使用 Sass 时出现错误行错误，我该如何解决？

javascript - 订购复选框及其标签

javascript - Bootstrap tabbable btn-toolbar 不切换

javascript - 尝试从 React 向 Node 发送 post 请求时出现代理请求错误，代理在 get 请求上工​​作正常

javascript - 如何将 GLSL 文件与 Gulp 捆绑在一起？

javascript - Firebase 添加内部 for 循环

javascript - x-可编辑表单使用ajax加载到div中

©2024 IT工具网  联系我们