在切换时更改顶部位置 JavaScript

Question

我有一个div，点击它会展开或关闭，我还想根据原始[=44]的点击状态更改不同固定div的顶部位置=].

例如如果原始 div 被扩展，我希望 div 2 有 top:10px

如果关闭div 2 有top:0

这是当前展开或关闭的切换功能div

<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";
    }

然而，这只会在单击时添加 top:10px，因此再次切换关闭 div top 不会重置为 0。

我需要一种表达方式：

如果切换打开则

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

其他

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

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';
    }
}

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

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 class

.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

On toggle change top position JavaScript

html

javascript

css

toggle