div由于toggle函数而被隐藏

Question

我有一个名为closeknop的div，当单击时，我想给menu一些.css样式，但当我在closeknop上使用.click时，它会覆盖我的css显示表达式。

当屏幕尺寸小于989px时，我希望closeknop是可见的，使用media only screen和display:block，它得到display:none，当我希望它被隐藏时，在media only之外，它得到了display:block，而我设置了display:none。

所以，为了解决我的问题，我尝试使用console.log()进行调试，但我的javascript只运行第一位，但当我将.toggle()更改为.click()时，它确实会运行，但单击时只运行一次源代码。

我的问题是：在这个javascript中使用.toggle()是不是做错了什么？

jsfiddle与两个.click and .toggle:jsfiddle

代码：

$(function(){
let menu = ('.nav-nav');
console.log('nou')
$(".closeknop").toggle(function() {
console.log('nee gewoon niet');
$(menu).css('height', '300px');
}, function() {
$(menu).css('height', '0');
});
});

.closeknop{
display:none;
width: 50px;
height: 50px;
background: blue;
}
@media only screen and (max-width: 989px){
.closeknop{display:block;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="closeknop"></div>

Answer 1

这是最终的解决方案：感谢@RoryMcCrossan

$(function(){
let menu = ('.nav-nav');
console.log('ja');
$(".closeknop").click(function() {
console.log('hoi');
$(menu).toggle( "slow" );
});
});