При переключении изменить верхнюю позицию JavaScript - PullRequest
Новая
       9

При переключении изменить верхнюю позицию JavaScript

0 голосов
/ 16 октября 2018

У меня есть div, который при щелчке расширяется или закрывается, я также хотел бы изменить верхнюю позицию другого фиксированного div в зависимости от состояния щелчка исходного 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";

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

используйте атрибут данных 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";
    }
  }
0 голосов
/ 16 октября 2018

Вы можете проверить текущее верхнее значение в блоке 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;}
...