使用 css 展开和折叠

Question

I have created in Jquery one function to expand and collapse the content of a div.我在 Jquery 中创建了一个函数来展开和折叠 div 的内容。 BUt now I would like to make it only with CSS and also use an image of an arrow, like these ones但是现在我只想用 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">&#8593;</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("↑");
    });
});

Answer 1

 .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>

Answer 2

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>

Answer 3

<!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();">&times;</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>

使用 css 展开和折叠

问题描述

2 个解决方案

解决方案1
13 已采纳 2014-09-30 12:53:29

解决方案2
0 2015-04-17 19:53:21

解决方案3
0 2018-03-25 11:16:15

使用 css 展开和折叠

问题描述

2 个解决方案

解决方案1 13 已采纳 2014-09-30 12:53:29

解决方案2 0 2015-04-17 19:53:21

解决方案3 0 2018-03-25 11:16:15

解决方案1
13 已采纳 2014-09-30 12:53:29

解决方案2
0 2015-04-17 19:53:21

解决方案3
0 2018-03-25 11:16:15