javascript - 在我的 html 页面上添加阅读更多内容会产生奇怪的行为

Question

抱歉，我真的想自己解决这个问题，但经过许多小时的试探和错误后，我进入了死胡同。

我正在使用 bootstrap 4 创建个人简历网站。我想添加一个阅读更多按钮来折叠文本以使其看起来更好。

我遇到了这段似乎可以完成工作的代码:

https://codepen.io/maxds/pen/jgeoA

html:

<div class="more"> my amazing JD</div>

CSS:

.morecontent span {
    display: none;
}
.morelink {
    display: block;
}

JS:

$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100;  // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";


$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
    });
});

我所做的是以下内容

将 JS 添加到我的 JS 文件的底部，

将 CSS 添加到我的 style.css

在相关标签中添加到我的相关区域。

执行此操作时，我的文本颜色发生变化，字体也与标准不同。

对于我做错了什么，我真的很不对劲。

这是我第一次涉足网站，除了用 python 进行数据分析外，我完全是个菜鸟。

Answer 1

因为隐藏文本被包裹在<span></span>中标签，虽然没有非隐藏文本，但可能有一些 css 分配给了 <span></span>未分配给 div.more 的标签.这很可能会被以下 css 或类似的东西覆盖

div.more span {
    color: inherit;
}

---

注意:使用浏览器的开发工具发现不透明度和字体大小被其他css改变了，可以用

修复

div.more span {
    font-size: inherit;
    opacity: 1;
}