Question

我有一个父DIV，有两个内部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以稍微榨取它。

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

如何在JavaScript中实现“最大化”按钮？

2 个答案: