在wordpress网站

Question

所以基本上我想要2个按钮（一个用于地图，一个用于最近的帖子）。我通过制作用于隐藏/显示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>

并在head标签中：

<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>

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

正如你所看到的，我试图在jQuery中包含一个函数，在加载后调整窗口大小，但没有运气。

加载地图和滑块的功能都正常。

你可以帮我解决这个问题，帮助我解决这个问题，或者给我一些想法，我该怎么做？