如何在单击"显示更多"按钮时删除背景的不透明度

Question

我有一个用户故事，只显示了前4行。第4行褪色，下面有"显示更多"按钮。按下"显示更多"(和"显示更少"(按钮后，我想删除不透明度并显示故事。展示这个故事很好，但我正在努力消除并回复第4行的不透明性。我使用一个：：after伪元素来应用渐变效果，并且我无法使用jQuery访问它。。。有什么建议吗？

这里的Fiddle示例

/*JQuery*/
<script src="jquery/jquery-3.3.1.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
$(document).ready(function() {
$(".content").on("click", '.showMore', function() {
var $this = $(this);
var content = $this.prev()
var linkText = $this.text().toUpperCase();

if (linkText === "SHOW MORE") {
linkText = "Show less";
$this.siblings('div').css('height', 'auto');
var currHeight = $this.siblings('div').height();
$this.siblings('div').css('height', '8em');
$this.siblings('div').animate({height: currHeight}, 500);
} else {
$this.siblings('div').animate({height: '8em'}, 500);
linkText = "Show more";
}
$this.text(linkText);

});
});
/*CSS*/
.post-text::after {
content: "";
position: absolute;
top: 6em;
left: 0;
height: 30px;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, 0), white);
}
.post-text{
position: relative;
letter-spacing: normal;
line-height: 2;
font-size: 16px;
font-family: Times, serif;
color: black;
text-align: justify;
}
.hideContent {
overflow: hidden;
line-height: 1em;
height: 8em;
}
.showContent {
line-height: 1em;
height: auto;
}
.showMore {
cursor: pointer;
text-align: center;
color: #1ca099;
text-decoration: underline;
}
/*Html*/
<div class="content">
<div class="post">
<div class="hideContent">
<div class="post-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit a ipsum nec pharetra. Donec eget tempus neque. Vestibulum sit amet sollicitudin ligula. Sed viverra odio nec augue fermentum condimentum. Etiam dapibus urna sit amet sagittis lobortis. Maecenas ut nisi et leo facilisis pellentesque. Pellentesque sed lacus nulla. Morbi auctor quam et neque fermentum, quis congue erat viverra. Aliquam aliquam vulputate lorem, euismod scelerisque augue finibus eu. Suspendisse efficitur bibendum nibh, blandit finibus sapien eleifend a. Vestibulum bibendum augue augue, nec dictum nisi posuere a.
</div>
</div>
<div class="showMore"><a>Show more</a></div>
</div>
</div>

Answer 1

不可能针对jQuery中的:after等伪元素。

但是，您可以使用一种变通方法。您可以使用一个附加类在CSS中设置另一个更具体的规则，该规则将删除CSS，例如

.fullpost .post-text::after {
height:0;          /* remove the height or the element still exists! */
background: none;  /* remove the white gradient background */
}

注意CSS的特殊性是这里的重要部分！因为我们使用了一个更具体的CSS选择器，它将覆盖.post-text::after的规则。如果我们将fullpost类添加到post-text类的任何祖先，则此规则现在将覆盖现有规则并将背景设置为none。

注意：我们还设置了height:0，因为否则不可见元素仍位于文本上方，可能会影响选择其下方的文本等操作。(这通常会单独工作，但如果你想确定的话，我们也可以删除白色覆盖！(

现在在jQuery中，当您单击"；显示更多"：

if (linkText === "SHOW MORE") {
$this.parent('div').addClass('fullpost');
/* rest of your code here... */
}

并将其移除以"；显示较少"：

} else {
$this.parent('div').removeClass('fullpost');
/* rest of your code here... */
}

工作示例：

$(document).ready(function() {
$(".content").on("click", '.showMore', function() {
var $this = $(this);
var content = $this.prev()
var linkText = $this.text().toUpperCase();

if (linkText === "SHOW MORE") {
linkText = "Show less";
$this.siblings('div').css('height', 'auto');
var currHeight = $this.siblings('div').height();
$this.siblings('div').css('height', '8em');
$this.siblings('div').animate({height: currHeight}, 500);
$this.parent('div').addClass('fullpost');
} else {
$this.siblings('div').animate({height: '8em'}, 500);
$this.parent('div').removeClass('fullpost');
linkText = "Show more";
}

$this.text(linkText);

});
});

.post-text::after {
content: "";
position: absolute;
top: 6em;
left: 0;
height: 30px;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, 0), white);
}
.fullpost .post-text::after {
height:0;
background: none;
}
.post-text{
position: relative;
letter-spacing: normal;
line-height: 2;
font-size: 16px;
font-family: Times, serif;
color: black;
text-align: justify;
}
.hideContent {
overflow: hidden;
line-height: 1em;
height: 8em;
}
.showContent {
line-height: 1em;
height: auto;
}
.showMore {
cursor: pointer;
text-align: center;
color: #1ca099;
text-decoration: underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="content">
<div class="post">
<div class="hideContent">
<div class="post-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit a ipsum nec pharetra. Donec eget tempus neque. Vestibulum sit amet sollicitudin ligula. Sed viverra odio nec augue fermentum condimentum. Etiam dapibus urna sit amet sagittis lobortis. Maecenas ut nisi et leo facilisis pellentesque. Pellentesque sed lacus nulla. Morbi auctor quam et neque fermentum, quis congue erat viverra. Aliquam aliquam vulputate lorem, euismod scelerisque augue finibus eu. Suspendisse efficitur bibendum nibh, blandit finibus sapien eleifend a. Vestibulum bibendum augue augue, nec dictum nisi posuere a.
</div>
</div>
<div class="showMore"><a>Show more</a></div>
</div>
</div>

Answer 2

您不能操作：after，因为从技术上讲，它不是DOM的一部分，因此任何JavaScript都无法访问。但是您可以在指定后添加一个带有new：的新类。你必须通过切换类来完成。

小提琴：https://jsfiddle.net/g21793nq/

使用此css：

.post-text.changed:after{
background:none;
}

Js:

$(document).ready(function() {
$(".content").on("click", '.showMore', function() {
var $this = $(this);
var content = $this.prev()
var linkText = $this.text().toUpperCase();

if (linkText === "SHOW MORE") {
linkText = "Show less";
$('.post-text').toggleClass('changed');
$this.siblings('div').css('height', 'auto');
var currHeight = $this.siblings('div').height();
$this.siblings('div').css('height', '8em');
$this.siblings('div').animate({height: currHeight}, 500);
} else {
$('.post-text').toggleClass('changed');
$this.siblings('div').animate({height: '8em'}, 500);
linkText = "Show more";
}
$this.text(linkText);

});
});

Answer 3

根据您的实现，我给您一个简单的解决方案，您可以在这里找到我的更改

在此处输入链接描述

我只是在你的内容中添加了一个修饰符类，给它设置了after样式，而不是元素。并使用现有的javascript条件切换类。ent

$(document).ready(function() {
var shortClass = "post-text--short";

$(".content").on("click", '.showMore', function() {
var $this = $(this);
var $postContent = $(".content").find(".post-text");
var content = $this.prev()
var linkText = $this.text().toUpperCase();

if (linkText === "SHOW MORE") {
linkText = "Show less";
$postContent.removeClass(shortClass);
$this.siblings('div').css('height', 'auto');
var currHeight = $this.siblings('div').height();
$this.siblings('div').css('height', '8em');
$this.siblings('div').animate({height: currHeight}, 500);
} else {
$this.siblings('div').animate({height: '8em'}, 500);
linkText = "Show more";
$postContent.addClass(shortClass);
}
$this.text(linkText);

});
});

.post-text--short::after {
content: "";
position: absolute;
top: 6em;
left: 0;
height: 30px;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, 0), white);
}
.post-text{
position: relative;
letter-spacing: normal;
line-height: 2;
font-size: 16px;
font-family: Times, serif;
color: black;
text-align: justify;
}
.hideContent {
overflow: hidden;
line-height: 1em;
height: 8em;
}
.showContent {
line-height: 1em;
height: auto;
}
.showMore {
cursor: pointer;
text-align: center;
color: #1ca099;
text-decoration: underline;
}

<div class="content">
<div class="post">
<div class="hideContent">
<div class="post-text post-text--short"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit a ipsum nec pharetra. Donec eget tempus neque. Vestibulum sit amet sollicitudin ligula. Sed viverra odio nec augue fermentum condimentum. Etiam dapibus urna sit amet sagittis lobortis. Maecenas ut nisi et leo facilisis pellentesque. Pellentesque sed lacus nulla. Morbi auctor quam et neque fermentum, quis congue erat viverra. Aliquam aliquam vulputate lorem, euismod scelerisque augue finibus eu. Suspendisse efficitur bibendum nibh, blandit finibus sapien eleifend a. Vestibulum bibendum augue augue, nec dictum nisi posuere a.
</div>
</div>
<div class="showMore"><a>Show more</a></div>
</div>
</div>