[英]How can I implement a “maximize” button in JavaScript?
I have one parent DIV, with two inner DIVs, each taking up 50% of the screen. 我有一个父级DIV,两个父级DIV分别占据屏幕的50%。 Looking for suggestions to achieve the following: 寻找实现以下目标的建议:
I believe jQuery Resizable is a bit too much for this, agreed? 我相信jQuery Resizable对于这个来说有点太多了,同意吗?
if you're already using jQuery, you could do: 如果您已经在使用jQuery,则可以执行以下操作:
$(".innerDiv").click(function() {
$(".innerDiv").hide();
$(this).css("width", "100%").show();
});
Which will first hide both inner divs, then change the CSS of the clicked div to 100% and show it. 这将首先隐藏两个内部div,然后将单击的div的CSS更改为100%并显示它。 Maybe not the most efficient way, but it should work (: 也许不是最有效的方法,但它应该可以工作(:
You could even change the .css
to .animate
to juice it up a little. 您甚至可以将.css
更改为.animate
以使其更加.animate
。
With a little css you can select which elements are visible by setting the class of the parent element. 使用少许CSS,您可以通过设置父元素的类来选择可见的元素。
CSS: CSS:
<style type="text/css">
#Parent.both .left { float: left; width: 50%; }
#Parent.both .right { float: left; width: 50%; }
#Parent.left .right { display: none; }
#Parent.right .left { display: none; }
</style>
Javascript: Javascript:
<script type="text/javascript">
function show(c) {document.getElementById('Parent').className=c;}
</script>
HTML: HTML:
<div id="Parent" class="both">
<div class="left">left</div>
<div class="right">right</div>
</div>
<input type="button" value="both" onclick="show('both');" />
<input type="button" value="left" onclick="show('left');" />
<input type="button" value="right" onclick="show('right');" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.