Question

我有一个div，它在单击时会扩展或关闭，我还想根据原始div的点击状态更改其他固定div的顶部位置。

例如如果原始div扩展了，我希望div 2具有'\0'

如果封闭的div 2具有top:10px

这是用于扩展或关闭div的当前切换功能

top:0

然后吼叫我

<a href="#" class="toggle" onclick="dropDownMSG(); this.parentNode.classList.toggle('open');return false;">
                    <img src="/Static/images/header-logo-top.png" alt="Informa logo"/>
                </a>

但是，这只会在点击时添加function dropDownMSG() { document.getElementById("mySidenav").style.top = "10"; }，因此再次切换会关闭div，而top:10px的剂量不会重置为top。

我需要一种表达方式：

如果将其打开则

其他

document.getElementById("mySidenav").style.top = "10";

Answer 1

您可以在if else块中检查当前的最高价值并相应地更新

function dropDownMSG() {
    const element = document.getElementById("mySidenav");
    if (element.style.top === '10') {
        element.style.top = '0';
    } else {
        element.style.top = '10';
    }
}

为了获得更好的性能，我建议您使用一个类。

function dropDownMSG() {
    const element = document.getElementById("mySidenav");
    //        if (element.style.top === '10') {
    //            element.style.top = '0';
    //        } else {
    //            element.style.top = '10';
    //        }

    if (element.className.indexOf('expand') === -1) {
        element.className += 'expand';
    } else {
        element.className = element.className.replace('expand', '');
    }
}

并添加一个CSS类

.expand{top:10px;}

Answer 2

使用html数据属性分配状态，然后单击即可在脚本中更改状态。

HTML

 <a href="#" class="toggle" onclick="dropDownMSG(this)">
   <img src="/Static/images/header-logo-top.png" alt="Informa logo"/>
 </a>

CSS

  function dropDownMSG(elem){
    if(elem.dataset.state === "open"){
      elem.dataset.state = "close";
      document.getElementById("mySidenav").style.top = "10px";
    }
    else{
      elem.dataset.state = "open";
      document.getElementById("mySidenav").style.top = "0";
    }
  }

在切换时更改顶部JavaScript

2 个答案: