将jquery转换为javascript以帮助显示div？
将jquery转换为javascript以帮助显示div？
提问于 2019-09-25 18:39:40
我正在尝试切换复选框，以便它将显示当前
@media screen and (max-width: 639.98px){
#menuPanel{
display: none !important;
}
}我在JQuery中的ready上得到了未解析的方法，所以我一定是用错了这个库。
我是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;
}
}任何帮助都是非常感谢的！
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-09-25 18:44:58
首先，因为您应该有$(document).ready(function(){ })，所以jQuery“脚本”将不起作用
其次，您不需要加载jQuery来实现您想要的功能。
您可以在checkbox上应用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>
Stack Overflow用户
发布于 2019-09-25 18:43:28
您似乎想要使用document.ready的jQuery版本。为此，您必须添加一个$符号，如下所示：
$(document).ready( ... )页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58096537
复制相关文章
相似问题
腾讯云开发者
