如何最大化和最小化一个 div（没有 jquery 只有 javascript）答案

【问题标题】：How to maximize and minimize a div (no jquery only javascript)如何最大化和最小化一个 div（没有 jquery 只有 javascript）
【发布时间】：2022-12-04 09:38:39
【问题描述】：

你好我需要在我的 html 页面中最大化或最小化一个 div 只使用 javascript 没有 jquery 我想能够这样做 http://jsfiddle.net/miqdad/Qy6Sj/1/

$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
    $("#box").slideToggle();
});

这正是我想要的，但没有 jquery

但是没有 jquery 只有 javascript，有人可以帮助我吗，我到处都用谷歌搜索，找不到答案

【问题讨论】：

考虑<details>。只有 HTML，没有 JavaScript。

标签： javascript html

【解决方案1】：

下面是一个示例，说明如何仅使用 vanilla JavaScript 实现相同的效果：

// get the button and box elements
var button = document.getElementById("button");
var box = document.getElementById("box");

// add a click event listener to the button
button.addEventListener("click", function() {
  // toggle the "open" class on the box
  box.classList.toggle("open");
  
  // update the button text
  if (button.innerHTML === "-") {
    button.innerHTML = "+";
  } else {
    button.innerHTML = "-";
  }
});

此代码侦听按钮上的单击事件，然后切换框元素上的打开类。开放类可以在您的 CSS 中定义如下：

.open {
  height: auto !important; /* or any other styles you want to apply to the expanded box */
}

这样，您就可以使用 CSS 过渡来平滑地为框的扩展和收缩设置动画。您还可以使用 button.innerHTML 属性在单击按钮时更新按钮文本。

内联示例如下所示：

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      height: 0;
      overflow: hidden;
      transition: height 0.5s;
    }
    
    .open {
      height: auto !important;
    }
  </style>
</head>
<body>
  <button id="button">-</button>
  <div id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in facilisis magna. Pellentesque hendrerit dolor in ipsum sagittis bibendum.
  </div>
  
  <script>
    // get the button and box elements
    var button = document.getElementById("button");
    var box = document.getElementById("box");

    // add a click event listener to the button
    button.addEventListener("click", function() {
      // toggle the "open" class on the box
      box.classList.toggle("open");

      // update the button text
      if (button.innerHTML === "-") {
        button.innerHTML = "+";
      } else {
        button.innerHTML = "-";
      }
    });
  </script>
</body>
</html>

【讨论】：

您好，非常感谢您的回答，有没有办法像在 jquery 代码中那样进行转换？谢谢你
我不认为有一种方法可以在 vanilla js 中更好地模仿它。您最好使用图书馆。
非常感谢这对我的项目有用，我还有一个问题，在我的情况下我必须显示 div 然后最小化它，而不是已经最小化，我尝试做切换（关闭）而不是打开和我也很方便地更改了 css，但它似乎不起作用，你知道我该怎么做吗，先生？当我最小化一个 div 时，我还可以添加一个条件吗？我希望它旁边的 div 变大，因为我希望它在最小化时占用空间，然后在最大化时我希望它恢复到原来的形状。我将不胜感激你已经给我的任何帮助，非常感谢
你也许可以将过渡应用到 css 以获得你想要的效果

【解决方案2】：

一个简单的谷歌搜索得出了：

https://www.itcodar.com/javascript/expand-div-on-click-with-smooth-animation.html#:~:text=How%20to%20display%20a%20div%20with%20a%20smooth,transition%20must%20include%20the%20change%20of%20height.%20Thus%3A

function seeMore() {
  const text = document.getElementById('website-info-idea')
  const text2 = document.getElementById('website-info-technical')
  text.classList.toggle("show")
  text2.classList.toggle("show")
}

.col {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 1s ease-in-out;
}

.col.show {
  opacity: 1;
  height: 23px;
  transition: all 1s ease-in-out;
}

#a1 {
  display:inline-block;
  border: solid 2px black;
}

<div id='a1'>
  <a onclick="seeMore()" class="btn btn-secondary btn-md btn-custom">About this Website</a>

  <div class="col" id="website-info-idea">Idea</div>
  <div class="col" id="website-info-technical">Technical</div>
</div>

【讨论】：