Question

我试图这样做，当点击一个按钮就像一个切换按钮时，文本及其下方的所有内容都会顺畅地移动到它下方，而不是突然移动它。一个例子是bootstrap navbar汉堡包菜单。在移动视图中单击菜单时，其下的其余项目将以平滑的方式移动，以便为导航栏项目腾出空间。以下是我在代码段中的代码。

＆＃13;

let box = document.querySelector("#box");
let seconddiv = document.querySelector("#seconddiv");
box.addEventListener("click", myfunc);
function myfunc() {
  if(seconddiv.style.display == "none") {
    seconddiv.style.display = "block";
  }
  else {
    seconddiv.style.display = "none"
  }
}

＆＃13;

#box {
  height: 50px;
  width: 50px;
  background-color: red
}

#seconddiv {
  display: none;
}

＆＃13;

<div id="box">
</div>
<div id="seconddiv">
  <p>whats up</p>
  <p>whats up</p>
  <p>whats up</p>
  <p>whats up</p>
  <p>whats up</p>
  </div>
<p>hello</p>

＆＃13;

当我点击红色框时，＆＃34;你好＆＃34;当＆＃34; seconddiv＆＃34;设置为显示。是否可以移动＆＃34;你好＆＃34;像引导程序一样顺畅吗？

Answer 1

您可以将jQuery用于此目的。 jQuery可以更好地处理。请包含以下jQuery代码的jQuery文件：

$('#box').click(function(){
    $('#seconddiv').slideToggle();
});

如果你想在点击时显示和隐藏div的速度更慢，那么在slideToggle函数中传递“slow”参数。

$('#seconddiv').slideToggle("slow");

Answer 2

转换不处理

display:none。但是你可以点击按钮，在按钮上添加一个类。然后在有课程时按下height:30px按钮.clicked＆＃39;

#seconddiv {
    height: 0;
    transition: height 0.5s
}

#seconddiv.clicked{
    height: 30px;
}

您也可以使用宽度或不透明度而不是高度，但不透明度的差异在于即使设置为opacity:0

，元素仍将使用该空间

如何在单击按钮时设置转换，并且从显示中更改“无”＆＃39;显示＆＃39;阻止＆＃39;

2 个答案: