如何在JavaScript中實現“最大化”按鈕？

Question

我有一個父級DIV，兩個父級DIV分別占據屏幕的50％。 尋找實現以下目標的建議：

• 我在每個內部DIV上都有一個“最大化按鈕”，這會將單擊按鈕的DIV的寬度設置為父DIV的100％寬度，從而使另一個隱藏。

我相信jQuery Resizable對於這個來說有點太多了，同意嗎？

Answer 1

如果您已經在使用jQuery，則可以執行以下操作：

$(".innerDiv").click(function() {
   $(".innerDiv").hide();
   $(this).css("width", "100%").show();
});

這將首先隱藏兩個內部div，然后將單擊的div的CSS更改為100％並顯示它。 也許不是最有效的方法，但它應該可以工作（：

您甚至可以將.css更改為.animate以使其更加.animate 。

Answer 2

使用少許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：

<script type="text/javascript">
function show(c) {document.getElementById('Parent').className=c;}
</script>

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');" />