Question

我正在制作一个切换div的脚本。它通过在单击时更改两个值之间的最大高度来实现。使用div上的onclick属性调用该函数。我有一个存储在Object中的数据，它包含与此div相关的数据。一段数据应该记录div的扩展，它是一个布尔值。所以我的代码看起来像这样：

＆＃13;

TV = {
  expanded: true,
  expand: 1
}
function toggleExpand(id="",query=0) {
    //expands or condenses tabs
    var queryWrapper = document.getElementById(id);
    var device = TV;
    console.log("TV.expanded: "+device.expanded);
    if (device.expanded == true) {
        //close
        device.expanded == false;
        document.getElementById(id).style.maxHeight = "43px";
        document.getElementsByTagName("h2")[query].style.color = "black";
        console.log("close");
    } else if (device.expanded == false) {
        //open
        device.expanded == true;
        switch (device.expand) {
            default:
              document.getElementsByTagName("h2")[query].style.color = "#d4470f";
              document.getElementById(id).style.maxHeight = "66px";
              break;
              //more cases are added, but are irrelevant to this issue
        }
        console.log("open");
    }
    console.log("TV.expanded: "+device.expanded);
}

＆＃13;

h2 {
  height: 42px;
  border: 1px solid black;
  border-radius: 10px;
  padding: 0;
  margin: 0;
}
#wrapper {
  border: 1px solid blue;
  text-align: center;
  overflow: hidden;
}

＆＃13;

<div id="wrapper">
  <h2 onclick="toggleExpand('wrapper');">Click me</h2>
  <div>Other stuff</div>
</div>

＆＃13;

我遇到的问题是由于某种原因，data.expanded的价值未被更新。我所看到的是div正在关闭，但它不会打开，因为变量没有被更新。知道为什么吗？我误解了某些事情的运作方式吗？

该功能由用户点击div中的标题来运行，该标题具有onclick属性。我之前说过这个，但显然不够清楚。

Answer 1

试试这段代码：

var data = true;
function toggleDiv() {
if (data === true) {
    //collapse div
    data = false; // update variable
} else {
    //expand div
    data = true; // update variable
}
}

只需使用简单的布尔值并根据您的要求进行更新。

Answer 2

切换布尔值的更简单方法是这样的： data.expanded = !data.expanded

var data = {expanded:true};
function toggleDiv() {
    data.expanded = !data.expanded;
    document.getElementById("expanded").innerHTML = data.expanded;
}

<div>
  <button id="button" onClick="toggleDiv()">Click</button>
</div>
<div id="expanded">
  
</div>

如果该变量等于值，则更新变量

2 个答案: