Question

在我的代码中，为什么颜色不能切换为黄色？ jQuery的slideUp返回一个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元素，这些元素是可见的，您正在为这些元素切换而不是h3

一种方法是在当前active

上单独切换h3类

.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类规范

1 个答案: