由于某种原因似乎无法实现。要么
.ToolTip.ToolTipText.ToolTip我这样组合它们：
<h3 class="ShowHide">Text to click and display/hide</h3>
<div class="ToolTip">
<div class="ToolTipText">Descriptive Text</div>
<div>
<label for="date">SaveDate:</label>
<input type="text" id="date" name="date" required minlength="17" maxlength="17" />
</div>
</div>
</div>
注意：我尝试使用 JavaScript 对 css 和 DOM 样式进行一些修改，但我不记得它们了，因为它们失败了（大多数时候是可见性和 z-index ）。
我希望将这两件事与
HTML5CSS3JavaScript隐藏一些不显示的内容并描述应插入其中的内容。
注意与其他小提琴相比，下拉菜单如何轻轻地显示和隐藏。
编辑：根据Bharata的要求 - 实际上不知道为什么，因为我看过像我这样的帖子......但对我来说很好。
完整代码：
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<style>
.ShowHide {
padding: 0;
font-size: 1em;
transition: 0.3s;
}
.ToolTip {
position: relative;
display: inline-block;
padding: 0 18px;
margin: 3px 0;
max-height: 0;
overflow: hidden;
transition: 0.3s ease-out;
}
.ToolTip > :nth-child(2) {
background-color: lightgreen;
padding: 10px;
}
.ToolTip .ToolTipText {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
-webkit-transform: translateY(calc(-5px - 100%));
transform: translateY(calc(-5px - 100%));
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.ToolTip .ToolTipText::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.ToolTip:hover .ToolTipText {
opacity: 1;
}
</style>
</head>
<body>
<h3 class="ShowHide"><u>Click Me!</u></h3>
<div class="ToolTip">
<div class="ToolTipText">Text to display</div>
<div>
<label for="x1">Hover over this green area</label>
<input id="x1" name="x1" />
</div>
</div>
<script>
let ShHi = document.getElementsByClassName("ShowHide");
for (let i = 0; i < ShHi.length; i++) {
ShHi[i].addEventListener("click", function () {
this.classList.toggle("show");
let nextEl = this.nextElementSibling;
nextEl.classList.toggle("active");
if (nextEl.style.maxHeight) {
nextEl.style.maxHeight = null;
} else {
nextEl.style.maxHeight = nextEl.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
就这样：
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
</head>
<body>
<style>
/* DropDown Part */
.ShowHide1 {
padding: 0;
font-size: 1em;
transition: 0.3s;
cursor: pointer;
}
/* ToolTip Part */
.ToolTip2 {
display: inline-block;
position: relative;
visibility: hidden;
}
.ToolTip2 > :nth-child(2) {
background-color: lightgreen;
max-height: 0;
display: inline-block;
overflow: hidden;
transition: 0.3s ease-out;
}
.ToolTip2 > :nth-child(2) > div {
padding: 10px;
display: inline-block;
}
.ToolTip2 .ToolTipText2 {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
-webkit-transform: translateY(calc(-5px - 100%));
transform: translateY(calc(-5px - 100%));
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.ToolTip2 .ToolTipText2::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.ToolTip2:hover .ToolTipText2 {
opacity: 1;
}
</style>
<h3 class="ShowHide1">Click Me!</h3>
<div class="ToolTip2">
<div class="ToolTipText2">Text to display</div>
<div>
<div>
<label for="x1">Hover over this green area</label>
<input id="x1" name="x1" />
</div>
</div>
</div>
<h3 class="ShowHide1">Click Me 2!</h3>
<div class="ToolTip2">
<div class="ToolTipText2">Text 2 to display</div>
<div>
<div>
<label for="x2">Hover over this green area 2</label>
<input id="x3" name="x2" />
</div>
</div>
</div>
<script>
let ShHi = document.getElementsByClassName("ShowHide1");
for (let i = 0; i < ShHi.length; i++) {
ShHi[i].addEventListener("click", function () {
this.classList.toggle("show");
let nextEl = this.nextElementSibling.children[1];
let toolTip = this.nextElementSibling;
nextEl.classList.toggle("active");
console.log(nextEl.style.maxHeight);
if (nextEl.style.maxHeight && nextEl.style.maxHeight !== "0px") {
nextEl.style.maxHeight = 0;
toolTip.style.visibility = "hidden";
} else {
nextEl.style.maxHeight = nextEl.scrollHeight + "px";
toolTip.style.visibility = "visible";
}
});
}
</script>
</body>
</html>