Question

我有一个名为closeknop的Div，单击时我想给menu一些样式.css，但是当我在.click上使用closeknop时它否决了我的CSS显示表达式。

当我希望closeknop在屏幕尺寸小于989px时可见，而将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" );
    });
});

div由于切换功能而被隐藏

1 个答案: