在html中展开abbr

Question

我想创造扩大缩写，如在这网站上。到目前为止，我有以下代码：

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

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

Answer 1

这是一个简单的片段，我已经做了以下您提供的网站。

首先，您需要有一个段落，然后将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.

​

Answer 2

我将把它分为两部分: HTML和CSS样式。

HTML

缩写的工作原理，它应该没有任何JS/CSS。通过使用上面的代码创建一个非常简单的html文件，您可以看到这一点。您可以从Mozilla上的示例中看到这一点(链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr)

<abbr title="Hypertext Markup language">HTML</abbr>

CSS造型

应用于您给出的示例的CSS是在悬停时为and和光标旁边的箭头按钮设计样式。它的样式在css中。请注意，下面的CSS要求abbr在具有class=“publication”的元素中，但您可以根据需要删除“.publication”定义。

此部分更改悬停颜色和指针。

.publication-body abbr {
    border: none;
    cursor: pointer
}

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

这一部分使圆圈和向下箭头在跨距后的abbr：

.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
}

Answer 3

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

​

abbr:not(:focus) {
  cursor: pointer;
}
abbr:focus::after {
  cursor: auto;
  content: attr(title);
  display: inline-block; /* Get rid of parent's text decoration */
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
}

<p>The <dfn id="whatwg"><abbr
title="Web Hypertext Application Technology Working Group" tabindex="-1">WHATWG</abbr></dfn>
is a loose unofficial collaboration of Web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

​