Javascript 在html中扩展abbr

我想创建扩展缩写，如在网站上。然而CSS和JS被最小化了，并且有这么多的标签，我被我有限的知识困住了。到目前为止，我有以下代码：

<abbr title="test" aria-expanded="true" class="active">
  1790
  <span></span>
</abbr>

1790

---

如果有人能进一步帮助我，我将非常感激。

这是他们使用的标记

<abbr aria-controls="insertion-infocard-contents-73397" aria-expanded="false" data-id="73397" title="De Verenigde Staten bestaan sinds de 1776. Maar in 1780 was het politiek nog veel te onrustig, dus de eerste volkstelling werd gepland voor 1790.">

---

以下是我根据您提供的网站制作的一个简单片段

首先需要有一个段落，然后将
abbr expand
元素放在
abbr
标记旁边，并使用脚本（我使用jQuery）在单击按钮时切换其显示


（函数（）{
$（“abbr”）。在（“单击“，”.abbr opener“，函数（）上）{
var$parent=$（this）.parent（），
$text=$parent.attr（“标题”）；
$（此）.toggleClass（“打开”）；
$parent.next（“.abbr expand”）.text（$text）.fadeToggle（）；
});
})();
.abbr开启器{
位置：相对位置；
显示：内联块；
宽度：20px；
高度：20px；
边界半径：100%；
垂直对齐：底部对齐；
背景颜色：灰色；
颜色：白色；
字体大小：粗体；
光标：指针；
转变：转变。2放松；
}
.abbr开启器跨度{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.abbr-opener.opening{
变换：旋转（45度）；
}
abbr.expand{
显示：无；
宽度：500px；
利润率：50像素；
}

信德
1790 +
美国的wordt er甚至是大众告诉gehouden de bevolking verdeelt op basis van ras。
我将把它分为两部分：HTML和CSS样式

HTML
缩写词在没有任何JS/CSS的情况下正常工作。通过使用上面的代码创建一个非常简单的html文件，您可以看到这一点。您可以从Mozilla上的示例中看到这一点（链接：）

此部分在缩写后的跨距中作圆圈和向下箭头：

.publication-body abbr span {
    width: 18px;
    height: 18px;
    background-color: #eae9e9;
    border-radius: 9px;
    position: relative;
    top: 4px;
    display: inline-block;
    margin-left: 6px
}

.publication-body abbr span:after {
    content: "";
    position: absolute;
    top: 7px;
    left: 3px;
    border-style: solid;
    border-width: 6px 6px 0;
    border-color: #df5b57 transparent
}

.publication-body abbr.active span:after {
    top: 5px;
    border-width: 0px 6px 6px;
    border-color: #df5b57 transparent
}

您可以尝试仅使用CSS的方法：


缩写：非（：焦点）{
光标：指针；
}
缩写：focus：：after{
光标：自动；
内容：attr（title）；
显示：内联块；/*去掉父级的文本装饰*/
宽度：100%；
填充：1em；
框大小：边框框；
}
WHATWG
是网络浏览器制造商和
希望开发旨在
允许作者在全球范围内编写和部署应用程序
是的，我理解。但是，我正在寻找应该添加的css/js
.publication-body abbr {
    border: none;
    cursor: pointer
}

.publication-body abbr:hover {
    color: #df5b57
}

.publication-body abbr span {
    width: 18px;
    height: 18px;
    background-color: #eae9e9;
    border-radius: 9px;
    position: relative;
    top: 4px;
    display: inline-block;
    margin-left: 6px
}

.publication-body abbr span:after {
    content: "";
    position: absolute;
    top: 7px;
    left: 3px;
    border-style: solid;
    border-width: 6px 6px 0;
    border-color: #df5b57 transparent
}

.publication-body abbr.active span:after {
    top: 5px;
    border-width: 0px 6px 6px;
    border-color: #df5b57 transparent
}