使用 css 展开和折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26121131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 02:37:33 来源:igfitidea点击:
Expand and collapse with css
提问by gbvisconti
I have created in Jquery one function to expand and collapse the content of a div. BUt now I would like to make it only with CSS and also use an image of an arrow, like these ones
我在 Jquery 中创建了一个函数来展开和折叠 div 的内容。但是现在我只想用 CSS 来制作它，并且还使用箭头的图像，就像这些
View Live jsFiddle
查看直播 jsFiddle
I also would like to eliminate all these tag span and keep only the div and it's content
我也想消除所有这些标签跨度，只保留 div 及其内容
Here the code I have so far.
这是我到目前为止的代码。
<div class='showHide'>
<span class='expand'><span id="changeArrow">↑</span>Line expand and collapse</span>
<fieldset id="fdstLorem">Lorem ipsum...</fieldset>
</div>
$(document).ready(function () {
$('.showHide>span').click(function () {
$(this).next().slideToggle("slow");
return false;
});
$(".showHide>span").toggle(function () {
$(this).children("#changeArrow").text("↓");
}, function () {
$(this).children("#changeArrow").text("↑");
});
});
回答by dashtinejad
.fieldsetContainer {
height: 0;
overflow: hidden;
transition: height 400ms linear;
}
#toggle {
display: none;
}
#toggle:checked ~ .fieldsetContainer {
height: 50px;
}
label .arrow-dn { display: inline-block; }
label .arrow-up { display: none; }
#toggle:checked ~ label .arrow-dn { display: none; }
#toggle:checked ~ label .arrow-up { display: inline-block; }<div class='showHide'>
<input type="checkbox" id="toggle" />
<label for="toggle">
<span class='expand'>
<span class="changeArrow arrow-up">↑</span>
<span class="changeArrow arrow-dn">↓</span>
Line expand and collapse
</span>
</label>
<div class="fieldsetContainer">
<fieldset id="fdstLorem">
Lorem ipsum...
</fieldset>
</div>
</div>回答by liljoshu
Here's the way I do it, it's simple and clean compared to doing stuff with checkboxes, but only expands on hover or click&hold (which is good for touch)...
这是我这样做的方式，与使用复选框进行操作相比，它简单而干净，但仅在悬停或单击并按住（这对触摸有益）时扩展...
<style>
.collapse-able {
height: 1.2rem;
overflow: hidden;
}
.collapse-able:active, .collapse-able:hover {
height: auto;
}
</style>
with
和
<div class="collapse-able">
<h1> The first line will always show </h1>
</br>
But what's underneath won't until hover or click and drag. Which is neat.
</div>
回答by Avik Chakraborty
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#myImg1, #myImg2, #myImg3 {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg1:hover {opacity: 0.7;}
#myImg2:hover {opacity: 0.7;}
#myImg3:hover {opacity: 0.7;}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,1); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin-left: 19px;
left: 210px;
bottom: 52px;
height: 100%;
border-radius: 0;
max-width:1100px;
}
/* The Close Button */
.close {
position: absolute;
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 80px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<img id="myImg1" src="http://celebwallpapers.net/wp-content/uploads/2017/11/breaking-bad-wallpapers-breaking-bad-wallpapers-for-mac-desktop-of-breaking-bad-wallpapers.jpg" alt="Trolltunga, Norway" width="300" height="200" onclick="myfunc(src);">
</div>
<div class="col-sm-4">
<img id="myImg2" src="https://www.pixelstalk.net/wp-content/uploads/images1/Desktop-Free-Download-Breaking-Bad-Wallpaper.jpg" alt="Trolltunga, Norway" width="300" height="200" onclick="myfunc(src);">
</div>
<div class="col-sm-4">
<img id="myImg3" src="http://images.indianexpress.com/2017/09/breaking-bad-card.jpg" alt="Trolltunga, Norway" width="300" height="200" onclick="myfunc(src);">
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<img class="modal-content" id="img01">
<span class="close" onclick="myfunc1();">×</span>
</div>
<script>
function myfunc(src)
{
document.getElementById('myModal').style.display = "block";
document.getElementById('img01').src=src;
}
function myfunc1()
{
document.getElementById('myModal').style.display = "none";
}
</script>
</body>
</html>
