我要
:编辑:示例:S3展开为“固态化”,并在出现这种情况后使副标题的透明度逐渐增加
在单击它时从左向右展开(从而显示隐藏的基础信息)。
我在jsfiddle中所做的事情似乎非常不稳定。 (它将在两个部分中打开辅助文本。)
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class = "s3notebox">
<h1>S3</h1>
</div>
<div class = "sub-headings">
<p>S3 notes go in this section which should flare out.</p>
</div>
CSS:
.s3notebox{
background-color: rgba(174, 214, 241, 0.5);
display: flex, inline-block;
white-space: nowrap;
height: 3em;
width: 10vw;
font-family: 'Poppins', sans-serif;
border-left: 6px solid #48C9B0;
border-radius: 2px;
}
.sub-headings{
white-space: nowrap;
height: 3em;
width: 10vw;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
border-left: 6px solid yellow;
position:absolute;
}
JS:
$(document).ready(function(){
$(".s3notebox").click(function(){
$(".sub-headings").slideToggle();
});
});
答案 0 :(得分:0)
我刚刚写了一个解决方案。在这里,我对您的html,css和js文件进行了一些更改。希望对您有帮助。
$(document).ready(function(){
$(".s3notebox").click(function(){
$("#subHeading").toggleClass('left-to-right-slide');
});
});
.s3notebox{
background-color: rgba(174, 214, 241, 0.5);
display: flex, inline-block;
white-space: nowrap;
height: 3em;
width: 10vw;
font-family: 'Poppins', sans-serif;
border-left: 6px solid #48C9B0;
border-radius: 2px;
}
.sub-headings{
white-space: nowrap;
height: 3em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
border-left: 6px solid yellow;
position: absolute;
transition: all 0.33s ease;
left: -100%;
}
.left-to-right-slide {
left: 1%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "s3notebox">
<h1>S3</h1>
</div>
<div id="subHeading" class = "sub-headings">
<p>S3 notes go in this section which should flare out.</p>
</div>