[英]Hide/reveal content in a div using js and css
我想通过单击图像的另一个div来显示div中的内容。 我有基本的想法,但当我将内容放入div时,关闭div并不会隐藏它。
我放入<ul>
,即使div隐藏, <ul>
始终显示。
$(document).ready(function () { $('#header').click(function () { $('#content').removeClass('hidden'); $('#content').addClass('visible'); }); $('#content').on('mouseleave', function (e) { setTimeout(function () { $('#content').removeClass('visible').addClass('hidden'); }, 600); }); });
.hidden{ max-height: 0px; } .visible{ max-height: 500px; } #content{ width:200px; height:200px; background:teal; -webkit-transition: max-height 0.8s; -moz-transition: max-height 0.8s; transition: max-height 0.8s; } #header{ width:10px; height:10px; background:darkred; margin:10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="header"></div> <div id="content"> <ul> <li>some text</li> <li>some text</li> </ul> </div>
这是因为您的<ul>
溢出了<div>
高度。 添加overflow: hidden
到#content
$(document).ready(function () { $('#header').click(function () { $('#content').removeClass('hidden'); $('#content').addClass('visible'); }); $('#content').on('mouseleave', function (e) { setTimeout(function () { $('#content').removeClass('visible').addClass('hidden'); }, 600); }); });
.hidden{ max-height: 0px; } .visible{ max-height: 500px; } #content{ width:200px; height:200px; background:teal; -webkit-transition: max-height 0.8s; -moz-transition: max-height 0.8s; transition: max-height 0.8s; overflow: hidden; } #header{ width:10px; height:10px; background:darkred; margin:10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="header"></div> <div id="content"> <ul> <li>some text</li> <li>some text</li> </ul> </div>
在#content div上添加隐藏的类并设置属性
overflow:hidden;
.hidden{
max-height: 0px;
}
.visible{
max-height: 500px;
}
#content{
width:200px;
height:200px;
background:teal;
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
overflow:hidden;
}
#header{
width:10px;
height:10px;
background:darkred;
margin:10px;
}
$(document).ready(function() {
$('#header').click(function() {
$('#content').removeClass('hidden');
$('#content').addClass('visible');
});
$('#content').on('mouseleave', function(e) {
setTimeout(function() {
$('#content').removeClass('visible').addClass('hidden');
}, 600);
});
});
<div id="header">
</div>
<div id="content" class="hidden">
<ul>
<li>some text</li>
<li>some text</li>
</ul>
</div>
也许尝试jQuery?
这是JSFiddle中的一种jquery方式。 但是我会过一段时间发布一个javascript解决方案
https://jsfiddle.net/fyws9zye/13/
$( "#Hideme" ).click(function() {
$('#package').hide();
});
$( "#showme" ).click(function() {
$('#package').show();
});
$(document).ready(function () {
$('#header').click(function () {
$('#content').removeClass('hidden');
$('#content').addClass('visible');
$('#Hej').show();
});
$('#content').on('mouseleave', function (e) {
setTimeout(function () {
$('#content').removeClass('visible').addClass('hidden');
$('#Hej').hide();
}, 600);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.