问题描述
我的目标是创建一个如图所示的切换箭头。 “关闭”状态包括一行文本,旁边有一个图标,以及随后触发切换的箭头。 “打开”状态包括一些文本行和图片(与屏幕快照中显示的内容略有不同,但是我真正遇到的只是动画部分)。
我正在使用HTML5 Up中的模板,该模板在菜单栏中包含类似的切换选项,因此我尝试复制无效的HTML和CSS代码。没有错误消息,切换按钮也未显示在网站上(有关CSS,请参见下面的代码段)。
<span class="opener">Text that appears next to toggle arrow</span>
是否可以使用HTML和CSS做到这一点,还是需要Javascript?
#menu ul a.opener,#menu ul span.opener {
-moz-transition: color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
text-decoration: none;
-webkit-tap-highlight-color: rgba(255,255,0);
position: relative; }
#menu ul a.opener:before,#menu ul span.opener:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
#menu ul a.opener:before,#menu ul span.opener:before {
-moz-transition: color 0.2s ease-in-out,-moz-transform 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out,-webkit-transform 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out,-ms-transform 0.2s ease-in-out;
transition: color 0.2s ease-in-out,transform 0.2s ease-in-out;
color: #9fa3a6;
content: '\f078';
position: absolute;
right: 0; }
#menu ul a.opener:hover:before,#menu ul span.opener:hover:before {
color: #015a9d; }
#menu ul a.opener.active + ul,#menu ul span.opener.active + ul {
display: block; }
#menu ul a.opener.active:before,#menu ul span.opener.active:before {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg); }
解决方法
您可以使用名为<details>
的html5元素轻松完成此操作
<details>
<summary>Click here to see something</summary>
Here's more stuff below :)
</details>
,
Details标签应该是首选的方式。但是,如果您想使其更加精美,或者您不能使用details标签,则可以自己创建这样的下拉列表。
也许是这样的:
CSS
.dropdown {
postion: relative;
}
.dropdown-content {
display: flex;
flex-direction: column;
width: fit-content;
border: 1px solid transparent;
position: absolute;
opacity: 0;
background: white;
z-index: 9;
transition: height 0.5s ease;
transition: opacity 0.3s ease;
height: 0;
overflow: hidden;
}
.dropdown.active .dropdown-content {
opacity: 1;
height: fit-content;
border-color: gray;
}
.dropdown-trigger > i > svg {
width: 0.7rem;
height: 0.7rem;
transform: rotate(90deg);
transition: all 0.3s ease;
}
.dropdown.active .dropdown-trigger > i > svg {
width: 0.7rem;
height: 0.7rem;
transform: rotate(-90deg);
}
HTML
<div class="dropdown">
<button class="dropdown-trigger"> <i><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" /></svg></i> Open</button>
<span class="dropdown-content">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</span>
</div>