javascript - 无法使基本的jQuery逻辑正常工作

我的HTML中有此按钮，基本上可以折叠/展开#leftmenu，并且可以正常工作：<a id="menutoggle" data-toggle="collapse" data-target="#leftmenu">Placeholder</a>

我想做到这一点：


如果在加载页面时#leftmenu可见，则添加
将top:-10px属性更改为#contentfix。
如果通过单击折叠按钮来折叠#leftmenu，则从top:-10px中删除​​#contentfix属性。
如果通过单击折叠按钮来展开#leftmenu，则将top:-10px属性添加到#contentfix。


每当top:-10px可见时，我基本上都希望在#contentfix中使用#leftmenu属性，而在top:0px隐藏时则需要属性。无论页面默认情况下是否可见/隐藏，还是通过单击折叠按钮来更改页面。

这是我目前的尝试：

if ($("#leftmenu").is(":visible")) {
    $('#contentfix').css('top','-10px');
    var visible = 1;
}

$('#menutoggle').click(function(e) {
    $('html, body').animate({ scrollTop: 0 }, 'fast');
    if (visible == 0){
        $('#contentfix').css('top','-10px');
        visible = 1;
    } else {
        $('#contentfix').css('top','0px');
        visible = 0;
    }
});

最佳答案

确保使用$(document).ready()。此外，您可以缓存jQuery对象，而无需设置可见变量并编写两次相同的功能。

$(document).ready(function(){
    var contentFix = $('#contentfix');
    var leftMenu = $("#leftmenu");
    var menuToggle = $('#menutoggle');
    var htmlBody = $('html, body');
    var toggle = function(){
        htmlBody.animate({ scrollTop: 0 }, 'fast');
        if (leftMenu.is(":visible")) {
            contentFix.css('top','-10px');
        } else {
            contentFix.css('top','0px');
        }
    }
    menuToggle.on('click', function() {
        toggle();
    });
});

关于javascript - 无法使基本的jQuery逻辑正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37646577/