javascript - 在HTML中扩展Abbr

我想创建扩展的缩写，例如this网站上的缩写。但是CSS和JS被最小化了，标签太多了，我的知识有限。到目前为止，我有以下代码:

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

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

最佳答案

这是我按照您提供的网站制作的一个简单代码段。

首先，您需要有一个段落，然后将abbr-expand元素放在abbr标记旁边，然后使用脚本(为此我使用jQuery)来在单击按钮时切换其显示。

(function() {
  $("abbr").on("click", ".abbr-opener", function() {
    var $parent = $(this).parent(),
        $text = $parent.attr("title");
    $(this).toggleClass("opening");
    $parent.next(".abbr-expand").text($text).fadeToggle();
  });
})();

.abbr-opener {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  vertical-align: bottom;
  background-color: grey;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: transform .2s ease-in;
}
.abbr-opener span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.abbr-opener.opening {
  transform: rotate(45deg);
}
.abbr-expand {
  display: none;
  width: 500px;
  margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

Sind <abbr 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.">
  1790 <div class="abbr-opener"><span>+</span></div>
</abbr>
<div class="abbr-expand">
  <span class="abbr-expandtext"></span>
</div> wordt er in Amerika een volkstelling gehouden die de bevolking verdeelt op basis van ras.

ABBR

javascript - 在HTML中扩展Abbr