给DIV一个最大化按钮

Giving a DIV a maximize button

本文关键字：一个 最大化 按钮 DIV      更新时间：2023-09-26

我目前在页面上有一个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>
相关文章：