Question

这是我的一段jquery加载一个href链接，因为我的窗口调整到小于767，这工作正常，它消失了我想要隐藏并显示我想看到的内容，但是点击重新加载按钮它将浏览器放回网页，因为它不应该在767以下的窗口宽度上。

无法正常工作，因为我刷新了已调整大小的网页。

observe({

#reset values on each flush event
which_input <<- ""
bmodel_content <<- ""
country_content <<- ""
company_content <<- ""

#check which input has changed
#save the name and content for later update statements
if(!is.null(input$bmodel))
{
  bmodel_content <<- input$bmodel
  which_input <<- "bmodel"
}
else if(is.null(input$bmodel))
{
  bmodel_content <<- c(unique(data$business.model))
  which_input <<- "bmodel"
}
if(!is.null(input$country))
{
  country_content <<- input$country
  which_input <<- "country"
}
else if(is.null(input$country))
{
  country_content <<- c(unique(data$country))
  which_input <<- "country"
}

(... another 3 if-else statements for the other 3 menus ...)

###
#ERROR: "which_input" should be set with the name of the changed input field
#       now it is always set to the last if-else-statement
###

(... filter data and updateSelectizeInput statements...)

请建议如何保持静止，不要将窗口宽度为767的设置移动

Answer 1

将此添加到您的javascript

$(document).load(function(e){

    width = $(window).width();

    if (width < 767){
        $("a.collapseListBt").show();
        // do something here
        if ($('.content-box-right').hasClass('show')){
            $('.content-box-right').removeClass('show');
        } 
    } else{
        $("a.collapseListBt").hide();
        $('.content-box-right').addClass('show');
    }

});

您的问题是您的功能仅在window.resize上调用，因此当您加载页面时，没有什么可以完成您想要的工作。更多的你真的可以使用CSS和媒体查询，在我看来，它会好得多。

Answer 2

您可以将这两个事件绑定在一起，如下所示：

$(window).on('resize load', function(e){

    width = $(window).width();

    if (width < 767){
        $("a.collapseListBt").show();
        // do something here
        if ($('.content-box-right').hasClass('show')){
            $('.content-box-right').removeClass('show');
        } 
     } else{
       $("a.collapseListBt").hide();
        $('.content-box-right').addClass('show');
    }

});

window.resize不能重新加载调整大小的窗口

2 个答案: