Javascript wordpress网站中带有响应滑块的隐藏div问题

所以基本上我想有两个按钮（一个用于地图，一个用于最近的帖子）。我通过为隐藏/显示div生成jQuery脚本来实现它，如下所示：

    <div id="main-choice" style="height:100%; width:100%;">
    <button class="buttons" id="button-region">News by regions</button>
    <button class="buttons" id="button-latest-news">Latest news</button> 
    </div>

        <div class="hide" id="world-map-chosen" style="width:100%;"><button id="back-to-choice-1">Back</button>
            <?php build_i_world_map(1); ?></div>
        <div class="hide" id="latest-news-chosen" style="height:400px; width:100%;"><button id="back-to-choice-2">Back</button> 
            <?php echo get_new_royalslider(1); ?> </div>    


    <script>
$("#world-map-chosen").hide();
$("#latest-news-chosen").hide();
$('#button-region').click(function() {
  $('#main-choice').fadeOut('slow', function() {
      $("#world-map-chosen").fadeIn("slow");
  });    
});
$('#button-latest-news').click(function() {
   $('#main-choice').fadeOut('slow', function() {
   $("#latest-news-chosen").fadeIn("slow", function(){
      fireOnResizeEvent();
  });
  });
  });
$('#back-to-choice-1').click(function() {
  $('#world-map-chosen').fadeOut('slow', function() {
      $("#main-choice").fadeIn("slow");
  });   
 });
 $('#back-to-choice-2').click(function() {
   $('#latest-news-chosen').fadeOut('slow', function() {
      $("#main-choice").fadeIn("slow");
  });   
 });
 </script>
       </div>

地区新闻
最新消息
返回
返回
$（“#选定世界地图”）.hide（）；
$（“#选择最新新闻”）.hide（）；
$（“#按钮区域”）。单击（函数（）{
$（“#主选项”）.fadeOut（'slow'，function（）{
$（“#选择世界地图”）.fadeIn（“慢”）；
});    
});
$（“#按钮最新消息”）。单击（函数（）{
$（“#主选项”）.fadeOut（'slow'，function（）{
$（“#选择最新消息”）.fadeIn（“慢”，函数（）{
fireOnResizeEvent（）；
});
});
});
$（'#返回选择-1'）。单击（函数（）{
$（“#选定世界地图”）.fadeOut（'slow'，function（）{
$（“主要选择”）.fadeIn（“慢”）；
});   
});
$（'#返回选择-2'）。单击（函数（）{
$（“#选择最新消息”）.fadeOut（'slow'，function（）{
$（“主要选择”）.fadeIn（“慢”）；
});   
});

在头标签中：

<script language="JavaScript" >
function fireOnResizeEvent() {
 var width, height;

 if (navigator.appName.indexOf("Microsoft") != -1) {
  width  = document.body.offsetWidth;
  height = document.body.offsetHeight;
 } else {
  width  = window.outerWidth;
  height = window.outerHeight;
 }

 window.resizeTo(width - 1, height);
 window.resizeTo(width + 1, height);
}

window.onresize = function() {
 alert("Resized!");
}
</script>

函数fireOnResizeEvent（）{
宽度、高度；
if（navigator.appName.indexOf（“Microsoft”）！=-1）{
宽度=document.body.offsetWidth；
高度=document.body.offsetHeight；
}否则{
宽度=窗宽；
高度=窗外高度；
}
窗口。重新调整大小（宽度-1，高度）；
窗口大小（宽度+1，高度）；
}
window.onresize=函数（）{
警报（“调整大小！”）；
}

我的问题是，滑块和贴图采用隐藏状态大小，在脚本显示时不会刷新

如您所见，我试图在jQuery中包含一个函数，用于在加载后调整窗口大小，但运气不佳

加载贴图和滑块的功能均正常工作

---

你能帮我解决这个问题吗？帮我修复这个代码，或者给我一些想法，我该怎么做？

看起来像是CSS问题。如果从一开始就可以看到贴图和滑块div，它们的大小是否正确？是。我试着只加载地图和滑块，它们都工作得很好。你使用Firebug或Chrome开发工具来检查CSS吗？当这些div可见时，它们将采用匹配CSS选择器指定的属性，因此您应该能够看到为什么它们不是您期望的大小“wp emoji release.min.js？ver=4.2.2:4未捕获类型错误：f.className.indexOf不是一个函数g.observe.childList@wp emoji release.min.js？ver=4.2.2:4”，但它与此问题无关（这是所谓的响应性映射，没有很好地实现），因为即使我删除了地图，滑动条本身的问题仍然存在。有趣的是，滑动条框架安装在div中，但在用户调整窗口大小之前，从最近发布的文章中获取的图像都很小。之后，他们采用新的窗口大小并正常工作。