按钮控制div的展开伸缩,按钮控制div的显示和隐藏

按钮控制div的展开伸缩，实际上是通过改变div的CSS样式来实现的。我们可以通过JavaScript来监听按钮的点击事件，然后根据需要改变div的CSS属性，从而实现展开和收缩的效果。

我们需要在HTML中创建一个按钮和一个要控制的div。按钮可以使用`<button>`元素，div可以使用`<div>`元素。为了方便操作，我们给按钮和div分别添加一个唯一的id属性。

<button id="toggleButton">点击我展开/收缩div</button>
<div id="content">这是要展开/收缩的内容</div>

接下来，我们可以使用JavaScript来监听按钮的点击事件，并根据当前div的状态来改变其展开和收缩的效果。我们可以使用`addEventListener`方法来为按钮添加一个点击事件的监听器。在监听器中，我们可以通过`getElementById`方法获取到按钮和div的引用，然后使用`style`属性来改变div的CSS样式。

document.getElementById("toggleButton").addEventListener("click", function() {
  var content = document.getElementById("content");
  if (content.style.display === "none") {
    content.style.display = "block";
  } else {
    content.style.display = "none";
  }
});

在上面的代码中，我们首先获取到按钮和div的引用，然后通过判断div的`display`属性来确定当前div的状态。如果div的`display`属性为"none"，说明div是隐藏的，我们将其改为"block"，从而展开div；如果div的`display`属性为"block"，说明div是显示的，我们将其改为"none"，从而收缩div。

除了使用`display`属性，我们还可以使用其他CSS属性来实现类似的效果。比如，我们可以使用`visibility`属性来控制div的显示和隐藏。不同于`display`属性，`visibility`属性的值可以是"visible"（显示）或者"hidden"（隐藏）。我们可以将上面的代码中的`display`属性替换为`visibility`属性来实现按钮控制div的显示和隐藏。

document.getElementById("toggleButton").addEventListener("click", function() {
  var content = document.getElementById("content");
  if (content.style.visibility === "hidden") {
    content.style.visibility = "visible";
  } else {
    content.style.visibility = "hidden";
  }
});

除了改变CSS属性，我们还可以使用CSS类来控制div的展开和收缩。我们可以在CSS中定义两个类，一个用于展开div，一个用于收缩div。然后通过添加或移除这些类来改变div的状态。我们可以使用`classList`属性的`add`方法和`remove`方法来添加和移除类。

document.getElementById("toggleButton").addEventListener("click", function() {
  var content = document.getElementById("content");
  if (content.classList.contains("expanded")) {
    content.classList.remove("expanded");
  } else {
    content.classList.add("expanded");
  }
});

在上面的代码中，我们首先判断div是否包含名为"expanded"的类。如果包含该类，说明div是展开的，我们将其移除；如果不包含该类，说明div是收缩的，我们将其添加。

通过以上的示例代码，我们可以实现按钮控制div的展开伸缩和显示隐藏的效果。这种方式可以应用于各种情况，比如展开/收缩菜单、显示/隐藏弹窗等。我们可以根据具体的需求选择合适的CSS属性或者类来实现相应的效果。