Question

我有6个段落。我使用幻灯片动画动画奇数段落如下：

$("#buttonBslideup").click(function(){
$("#col2 p:odd").slideUp();
});

在此之后，我使用向下滑动动画将奇数段落带回原位，如下所示：

$("#buttonBslidedown").click(function(){
$("#col2 p:odd").slideDown();
});

在此之后如果我想通过点击另一个按钮来组合第3和第4段，它就不起作用。

    $("#buttonCAdd").click(function () {
    $("#col2 .thirdparagraph").addClass("orig");
    $("#col2 .fourthparagraph").addClass("orig");
});
<style>
.orig{
display:inline;
}
</style>

如果我刷新页面并首先按下按钮组合段落，它可以正常工作。但在滑出并滑入后，它不起作用。

找到以下HTML代码：

<div id="col2">

<p class="firstparagraph"> firstparagraph </p>
<p class="secondparagraph"> secondparagraph </p>
<p class="thirdparagraph">  thirdparagrap  </p>
<p class="fourthparagraph"> fourthparagraph </p>
<p class="fifthparagraph">  fifthparagraph  </p>
<p class="sixthparagraph">  sixthparagraph  </p>
</div>

可能是什么原因？如果有人有任何想法，请分享。或者说一些替代方法，以便即使在滑动操作之后组合也应该起作用。

Answer 1

这应与CSS specificity规则相关。与类选择器相比，那些jQuery方法为元素和内联样式添加内联display样式具有更高的特异性。添加的类规则不能覆盖内联样式。

使用css方法设置display属性或将!important添加到CSS属性（ !important被视为不良做法，应该是避免。）

为什么在jQuery中的slideOut（）和slideIn（）操作之后组合2个段落不起作用？

1 个答案: