Question

我在Jquery中创建了一个扩展和折叠div内容的函数。现在我想用CSS制作它，并使用箭头图像，就像这些

enter image description here

查看直播 jsFiddle

我还想消除所有这些标签范围，只保留div和它的内容

这是我到目前为止的代码。

<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

这就是我的方式，与使用复选框相比，它简单而干净，但只在悬停或点击＆amp; hold（这适合触摸）时展开...

<style>

.collapse-able {
    height: 1.2rem;
    overflow: hidden;
}

.collapse-able:active, .collapse-able:hover {
    height: auto;
}

</style>

带

<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展开和折叠

3 个答案: