Как переключить видимость адаптивной панели навигации? - PullRequest
Новая
       10

Как переключить видимость адаптивной панели навигации?

0 голосов
/ 12 февраля 2020

Я пытаюсь создать адаптивную панель навигации, которая отображается, если я нажимаю кнопку (значок), и не отображается, если я нажимаю эту кнопку еще раз. Я также пробовал это с .addEventListener (нажмите, ...), но я просто не могу сделать это. (так что это мой предпочтительный способ) Я думаю, что это довольно простой вопрос, но я не нашел способа решить его. Вот что я получил:

Фрагмент: 

function toggleNav() {
  let open = false;
  if (open == false) {
    navUl = document.getElementById("navUl");
    navUl.style.display = "block";
    open = true;
  }

  if (open == true) {
    navUl = document.getElementById("navUl");
    navUl.style.display = "none";
    open = false;
  }
}
@media screen and (max-width: 800px) {
  /* nav bar */
  #bars {
    display: block;
  }
  nav ul {
    display: none;
  }
  /* heading */
  #opener h1,
  #audioPlayer h1 {
    font-size: 25px;
  }
}
image

Ответы [ 3 ]

0 голосов
/ 12 февраля 2020

Это проблема объявления переменных, поэтому она не работает в вашем коде. Я немного изменил твой код. Надеюсь, это поможет вам. 

let open = false;    
function toggleNav(){
  if(open==false){
      navUl = document.getElementById("navUl");
      navUl.style.display="block";
      open = true;
  }else{
        navUl = document.getElementById("navUl");
        navUl.style.display="none";
        open = false; 
  }
}
0 голосов
/ 12 февраля 2020

В вашем коде есть несколько опечаток

open = false должны быть объявлены как глобальные переменные, вы присваиваете open как false каждый раз, когда вызываете функцию toggleNav().

Вы можете непосредственно проверить, является ли переменная истинной, просто как if (open) вместо if (open == true)

Вместо назначения true или false в условии if / else, вы можете напрямую назначить противоположное тому, чего нет на данный момент. как open = !open, так что если open равно false, оно станет истинным, и наоборот

Окончательный код будет выглядеть как 

let open = false;
function toggleNav() {
  open = !open;
  if(open){
    navUl = document.getElementById("navUl");
    navUl.style.display="none";        
  } else {
    navUl = document.getElementById("navUl");
    navUl.style.display="block";

  }
}
0 голосов
/ 12 февраля 2020

Если элемент видим (т.е. display == 'block'), элемент может быть скрыт. Если он скрыт (т.е. display == 'none'), элемент может быть показан. window.getComputedStyle () получит css определенного элемента. 

function toggleNav(){
   let navUl = document.getElementById("navUl");
   // If the element is visible, hide it
   if (window.getComputedStyle(navUl).display === 'block') {
       navUl.style.display = 'none';
   }else{
       navUl.style.display = 'block';//if element is not visible then display
   }
}
...