Question

我正在尝试根据窗口大小加载我的侧边栏（sidebar.php）。无论窗口大小如何，原始代码都会加载侧边栏。它工作正常，但我需要更改它，以便它只加载侧边栏，如果窗口大于特定宽度。这是原来的：

<?php include("sidebar.php"); ?>

我尝试使用jQuery来完成加载，如果窗口足够大以显示它。 #sidebarcontainer是所有侧边栏内容的主要部分。这是我尝试过的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($(window).width() > 665){
$("#sidebarcontainer").load("sidebar.php");
}
});
</script>

这不起作用。侧栏在任何大小的窗口上都没有显示。

而且我认为我还需要一个其他声明，如果它不是大于665那么就不要加载？

Answer 1

只需尝试使用此代码 100％正常并进行测试：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Load demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Response:</b>
<div id="sidebarcontainer"></div>
<script>
$(window).load(function(){
  if($(window).width() > 665){
    $( "#sidebarcontainer" ).load( "register.php", function( response, status, xhr ) {
      if ( status == "success" ) {
        $('#sidebarcontainer').show();
      }
      if ( status == "error" ) {
        //var msg = "Sorry but there was an error: ";
        //$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
        $('#sidebarcontainer').hide();
      }
    });
 }
 else{
   $('#sidebarcontainer').remove();
 }
});
</script>
</body>
</html>

使用jQuery基于窗口大小加载sidebar.php

1 个答案: