Конвертировать jquery в javascript, чтобы помочь отобразить div?

Question

Я пытаюсь установить флажок, чтобы он отображал заголовок / div, который в настоящее время

@media screen and (max-width: 639.98px){
    #menuPanel{
        display: none !important;
    }
}

Я получаю неразрешенный метод на ready в JQuery, поэтому я долженнеправильно использовать библиотеку.

Я новичок в JQuery и Javascript, и мне было интересно, есть ли способ конвертировать этот Jquery в javascript?

(document).ready(function() {
    $('#myCheck').change(function() {
       $('#menuPanel').toggle();
  });
 });

С некоторыми html

<div class="hamburger">
            <label class="toggle" id="menuDisplay">
                <input type="checkbox" id="myCheck">

 <header class="masthead mb-auto" id="menuPanel">

Текущий код в этом файле JS работает.

function displayWindowSize() {
    var w = document.documentElement.clientWidth;
    var toggle = document.querySelector(".toggle input");

    if (w > 640) {
        toggle.checked = false;
    }
}

Любая помощь очень ценится!

Answer 1

Во-первых, этот jQuery 'скрипт' не будет работать, потому что у вас должно быть $(document).ready(function(){ })

Во-вторых, вам не нужно загружать jQuery для достижения того, что вы хотите.

Вы можете применить событие onclick к флажку, затем проверить, установлен он или нет, и показать / скрыть свое меню.

var menu = document.getElementById('menuPanel');
function checkboxChanged(event) {
  event.target.checked ? menu.style.display = 'block' :  menu.style.display = 'none'
}

#menuPanel {
  display: none;
}

<header class="masthead mb-auto" id="menuPanel">HEADER</header>

<div class="hamburger">
  <label class="toggle" id="menuDisplay">
    <input type="checkbox" id="myCheck" onclick="checkboxChanged(event)" />
  </label>
</div>

ИЛИ, если вы не можете изменить HTML и применить встроенную функцию, вы можете делать все внутри тегов script

var menu = document.getElementById('menuPanel');
var checkbox = document.getElementById('myCheck');
checkbox.onclick = function() {
  this.checked ? 
     menu.style.cssText += ';display:block !important;': menu.style.cssText += ';display:none !important;'
}

#menuPanel {
  display: none!important;
}

<header class="masthead mb-auto" id="menuPanel">HEADER</header>

<div class="hamburger">
  <label class="toggle" id="menuDisplay">
    <input type="checkbox" id="myCheck" />
  </label>
</div>

Answer 2

Похоже, вы хотите использовать версию jQuery document.ready.Для этого вам нужно добавить символ $, например:

$(document).ready( ... )