Question

我目前在我的页面上有一个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在页面上直接相邻放置，如果我可以在标题旁边添加一个按钮，允许用户将该部分放大，就像他们最大化读数一样。

Answer 1

只需给你一瞥，根据你的要求改变造型。

WORKING:DEMO

<强> 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");
    });
});

Answer 2

<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>

为DIV提供最大化按钮

2 个答案: