Javascript Toggle on keydown

Question

Я довольно новый, когда речь заходит о том, чтобы получить голову вокруг функций JS. Все, что я использовал раньше, я имел тенденцию использовать как есть, но я пытался объединить и изменить функцию, чтобы получить Div для переключения (высота & непрозрачность) на конкретном нажатии клавиши. У меня есть первая часть (можно получить div, чтобы показать на комбо ctrl + o, но не может объединить его с оператором if, чтобы показать или скрыть, исходя из текущего состояния отображения.

Текущий рабочий «показать только» JS:

$(document).keydown(function (e) { 
    if (e.keyCode == 79 && e.ctrlKey) { 
     document.getElementById('thediv').style.height = 'auto'; 
     document.getElementById('thediv').style.opacity = '1'; 
     return false; 
    } 
}); 

Не работает «Включить/выключить» JS (Я попытался изменить это повсюду, это больше, чтобы дать представление о том, что я 'm пытается достичь):

$(document).keydown(function (e) { 
    if (e.keyCode == 76 && e.ctrlKey) { 

     function toggler('thediv') { 
      var myDiv = document.getElementById('thediv').style.height; 
      if (myDiv == "auto") { 
       document.getElementById('thediv').style.height = "0px"; 
       document.getElementById('thediv').style.opacity = "0"; 

      } else { 
       document.getElementById('thediv').style.height = "auto"; 
       document.getElementById('thediv').style.height = "1"; 
      } 
     } 

    } 
}); 

Любая помощь была бы действительно оценена!

Answer 1

Вы хотите показать и спрятать элемент, для чего установить его высоту и видимость? Просто покажите/скройте его toggle.

$(document).keydown(function (e) { 
    if (e.keyCode == 76 && e.ctrlKey) { 
     $("#thediv").toggle(); 
    } 
}); 

Глядя на ваш код

$(document).keydown(function (e) { 
    if (e.keyCode == 76 && e.ctrlKey) { 

     //This funciton is never called, you define it, do not call it! 
     function toggler('thediv') { //<-- Error Here, you have a string as an argument? 
      var myDiv = document.getElementById('thediv').style.height; 
      if (myDiv == "auto") { 
       document.getElementById('thediv').style.height = "0px"; //<--Bad practice using document.getElementById('thediv') over and over. Store it into a variable and reference it. 
       document.getElementById('thediv').style.opacity = "0"; 

      } else { 
       document.getElementById('thediv').style.height = "auto"; 
       document.getElementById('thediv').style.height = "1"; 
      } 
     } 

    } 
});