jquery - 菜单在移动模式下下降太多

Question

我正在尝试构建一个响应式网站，但是，我的一个 div 阻止了移动 View 的正确显示。单击导航时，由于 top margin 属性为 102px，菜单向下跳得太远。我需要在导航关闭时以这种方式设置此边距，但在导航打开时则不需要。我认为让这个响应式网站正常工作的唯一方法是使用 jquery 来解决问题，但到目前为止，我尝试的每种技术都没有效果。我对 Jquery 还是很陌生，所以我不确定该怎么做。非常感谢任何帮助。谢谢。

JQUERY

var screensize = document.documentElement.clientWidth;

$(document).ready(function(){

    // check for window size size on page load and show relevant content only   
    $(window).resize(function () {
        var width = $(window).width();
        console.log(width);
        if (width < 600) {
            $('.link').hide();
        } else {
            $('.link').show();
        }
    });

    $('header').on('click', function() {
        $('.link').slideToggle(500);
        $('#G').css({'margin-top', '0'});
        e.preventDefault();

    });
});

这是一个fiddle - 只需为移动 View 调整浏览器大小。我只想在单击标题时减少 margin 量。

Answer 1

您能否为我们提供一个 JSFiddle，以便我们了解页面的结构及其工作原理？然而，如果没有它，我可以建议的一件事是检查导航，并应用或删除 css 属性(如果它可见或不可见)。

例如:

if ($('.link').is(":visible")) {
    // Apply css changes needed if nav is visible   
} else {
  // Apply css changes needed if nav is not visible   
}

看着你的代码(没有完整地看到它)，我想是这样的:

if ($('.link').is(":visible")) {
    $('#G').css('margin-top', '0'); // Remove margin if nav is visible  
}

此外，作为附加信息，您的 .css 调用中不需要花括号，请查看 this有关使用 .css() 的更多信息

JSFiddle: https://jsfiddle.net/q4mxt9od/