我正在尝试对减号进行交叉更改并弹出一些文本。
我有一个例子，但我不明白它是如何与 ::after 一起工作的。
它是用 ::after 制作的，但我不明白如何使用它。还是用 JavaScript 制作的？
我的代码
h2 {
text-transform: uppercase;
letter-spacing: 3px;
font-family: ProximaNovaT-Thin;
font-weight: 400;
font-size: 34px;
line-height: 44px;
}
h5 {
cursor: pointer;
line-height: 24px;
border-top: 1px solid #777;
border-bottom: 1px solid #777;
position: relative;
padding: 20px 75px 20px 0;
}
h5::before {
content: "";
position: absolute;
background: url(https://d2311lpn2eqzan.cloudfront.net/villarealestate/images/plus-icon1.png) scroll no-repeat center center;
background-size: auto;
top: 0;
right: 0;
width: 70px;
height: 100%;
background-size: 45px 45px;
}
.opencont h5::after {
content: url(https://d2311lpn2eqzan.cloudfront.net/villarealestate/images/minus.png) scroll no-repeat center center !important;
}<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- COSTUM STYLE.CSS -->
<link href="Classes/Model/Contact.css" rel="stylesheet" type="text/css"/>
<title>ThemeBuild B.V.B.A</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 style="padding-top: 50px; padding-bottom: 40px; font-weight: 400; font-family: ProximaNovaT-Thin;">Contact gegevens</h2>
<div class="locatie-dropdown">
<div class="topc text-left">
<h5 style="font-size: 16px;">WOODSTOCK LOCATIONS</h5>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- BOOTSTRAP SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</html>最佳答案
我会根据您提供的信息尽我所能回答。
首先，::after 是一个伪元素。您可以在这里阅读:https://www.w3schools.com/cssref/sel_after.asp . 这意味着“十字”(+) 和 (-) 位于所选元素之后(在本例中为 h5)。
其次，此功能很可能是通过一些 javascript 实现的。这将涉及使用事件监听器(或内联 javascript onClick)来捕获元素的 onClick 事件(在这种情况下可能是 h5 的父级或 h5 本身)，并更改一个 css 属性，该属性表明内容是否是展开(显示)或不展开。要显示的内容可能会使用 display:none 或 visibility:hidden 来打开/关闭。 “叉号”(+) 或 (-) 将在同一个 onClick 事件中适当更改。
在伪代码中: 如果单击，内容被隐藏，则显示内容并将 + 更改为 -。 如果单击并显示内容，则隐藏内容并将 - 更改为 +。
关于javascript - 如何让 "cross"弹出::在不同的部分之后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54949882/