CSS class 选择器中的规范

Question

在我的代码中，为什么颜色没有切换为黄色？ jQuery 的 slideUp returns 一个 jQuery 对象，所以我不明白为什么这不起作用的问题。

$(document).ready(function () {

    $(".accordion h3:first").addClass("active");
    $('.accordion p:not(:first)').hide();

    $('.accordion h3').on('click', function (e) {
        $(this).next('p')
            .slideToggle('slow')
            .siblings('p:visible')
            .slideUp('slow')
            .toggleClass('active')
            .siblings("h3").removeClass("active");
    });

});

.accordion {
  width: 480px;
  border-bottom: 1px solid #c4c4c4;
}
.accordion h3 {
  background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
  font: bold 120%/100% Arial, Helvetica, sans-serif;
  padding: 7px 15px;
  margin: 0;
  border: 1px solid #c4c4c4;
  border-bottom: none;
  cursor: pointer;
}
.accordion h3:hover {
  background-color: #e2e2e2;
}
.accordion h3.active {
  background-position: right 5px;
}
.accordion p {
  background-color: #f7f7f7;
  margin: 0;
  padding: 10px 15px 20px;
  border-left: 1px solid #c4c4c4;
  border-right: 1px solid #c4c4c4;
}
.accordion h3.active {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
  <h3 class='active'>Photos</h3>
  <p>Here are the photos of this person</p>
  <h3>About</h3>
  <p>About this person</p>
  <h3>Friends</h3>
  <p>Friends go here</p>
  <h3>Work Info</h3>
  <p>Work info goes here</p>
  <h3>Relationship Status</h3>
  <p>status goes here</p>
  <h3>Orientation</h3>
  <p>Orientation goes here</p>
</div>

View on JSFiddle

Answer 1

这条线的起因..

.next('p') and .siblings('p:visible')

您的链已经有 2 层深，p 个元素，第二个选择是 p 个可见元素，您正在为这些元素切换 class 而不是 [=15] =]

一种方法是在当前 h3

上单独切换 active class

.slideUp('slow')
.end()
.siblings("h3").removeClass("active");
// Add active to the current class            
$(this).addClass('active');

Fiddle

您也可以使用end结束最近的过滤过程。因为您在操作之前已经选择了 p 元素两次。

.slideUp('slow')
.end()
.end()
.toggleClass('active')
.siblings("h3").removeClass("active");

应该也可以。

Updated Fiddle

CSS class 选择器中的规范

CSS class specification in selector

html

javascript

css

jquery

jquery-selectors