我目前在页面上有一个div,我希望用户能够点击并最大化该div,使其显示在整个屏幕上。我希望它类似于Gmail有一个按钮,可以让你最大化用户正在看的东西,然后再点击一个按钮就可以恢复到原来的大小。
我遇到的问题是,我的div中包含3个div。这是我的HTML
<div id="pre">
<div id="pre-title">Pre Reading</div>
<div id="pre-text">blahhh.</p></div>
</div>
<div id="passage">
<div id="passage-title">2.2.3</div>
<div id="passage-text">blahlkdsfjahlskdjfh</div>
</div>
<div id="media">
<div id="media-title">Media Videos</div>
<div id="media-text">even more garbage</div>
</div>
这些div直接放在页面上,如果我能在标题旁边包含一个按钮,允许用户将部分放大,就像他们最大化读数一样,我会很高兴。
只是让您眼前一亮,根据您的需求更改样式。
工作:演示
JS
$(document).ready(function () {
$(".readmore").click(function () {
var readMore = $(this).parent().attr("id");
var mainDiv = $("#" + readMore).parent().attr("id");
var textDiv = mainDiv +"-text";
$("."+ textDiv).toggleClass("maximize");
});
$(".close").click(function () {
$(".pre-text, .passage-text, .media-text").removeClass("maximize");
});
});
<script>
$(document).ready(function() {
$('#pre').click(function(e) {
$('#pre').toggleClass('maximized', 500); // 500 ms to animate
} );
} );
</script>
<style>
#pre {
width: 50px;
}
#pre.maximized {
width: 500px;
}
</style>