Question

我正在尝试构建响应式网站，但是，我的一个div正在阻止移动视图正常显示。单击导航时，由于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 - 只需调整移动视图的浏览器大小即可。我只是想在单击标题时减少边距量。

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/

移动模式下的菜单下降太多

1 个答案: