Question

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

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

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

Answer 1

我要将其分为两部分：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是为abbr旁边的箭头按钮和悬停时的光标设置样式。这个样式在css中。请注意，下面的CSS要求abbr位于具有class =＆＃34; publication-body＆＃34;的元素中，但是您可以删除＆＃34; .publication-body＆＃34;根据需要定义。

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

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

以下是我根据您提供的网站制作的简单摘录。

首先，您需要有一个段落，然后将abbr-expand元素放在abbr标记旁边，并使用脚本（我使用jQuery）来点击按钮上的显示。 / p>

(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 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>

Answer 4

这是他们使用的标记...

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

见这里......

http://www.w3schools.com/tags/tag_abbr.asp

在html中扩展abbr

4 个答案:

HTML

CSS样式