Question

在全屏和小屏上执行不同大小的侧边栏，但是直到我在小屏或全屏下重新加载页面后才起作用

<script>
if ($(window).width() < 960) {
  function openNav() {
    document.getElementById("mySidebar").style.width = "70%";
  }

  function closeNav() {
    document.getElementById("mySidebar").style.width = "0%";
    document.getElementById("main").style.paddingLeft = "0";
    document.getElementById("table-name").style.marginRight = "0";
    document.getElementById("table-name").style.marginLeft = "0";
  }
} else if ($(window).width() > 960) {
  function openNav() {
    document.getElementById("mySidebar").style.width = "14%";
    document.getElementById("main").style.paddingLeft = "13%";
    document.getElementById("table-name").style.marginRight = "28px";
    document.getElementById("table-name").style.marginLeft = "26px";
  }

  function closeNav() {
    document.getElementById("mySidebar").style.width = "0";
    document.getElementById("main").style.paddingLeft = "0";
    document.getElementById("table-name").style.marginRight = "0";
    document.getElementById("table-name").style.marginLeft = "0";
  }
}
</script>

Answer 1

那是因为上面的代码仅在站点加载时运行一次。为了在浏览器窗口大小改变后立即执行它，您必须使用 rezise 事件监听器。

for($x = 0; $x <=$length; $x++) { 
    $dataa='
{
 "id":"'.generateRandomString(8).'",
 "title":"AO SHOW",
 "description":"AO Show with Aidan and Oonagh",
"imageUrl":"https://www.iradio.ie/wp-content/uploads/2019/02/AO-show.png",
 "programmeId": "'.generateRandomString(14).'",
 "startTime":"'.$datetime = new DateTime($dates[$x].'06:50:00');$datetime->format(DateTime::ATOM).'",
 "endTime":"'.$datetime = new DateTime($dates[$x].'09:50:00');$datetime->format(DateTime::ATOM).'",
 "duration":"03:00:00"
},';
fwrite($fp, $dataa);
}

Answer 2

在任何方法之外定义所有函数，然后在底部调用将连接适当函数的函数（在任何方法之外，并在$(window).resize方法中）

  function openNavSmall() {
    document.getElementById("mySidebar").style.width = "70%";
  }

  function closeNavSmall() {
    document.getElementById("mySidebar").style.width = "0%";
    document.getElementById("main").style.paddingLeft = "0";
    document.getElementById("table-name").style.marginRight = "0";
    document.getElementById("table-name").style.marginLeft = "0";
  }

  function openNavBig() {
    document.getElementById("mySidebar").style.width = "14%";
    document.getElementById("main").style.paddingLeft = "13%";
    document.getElementById("table-name").style.marginRight = "28px";
    document.getElementById("table-name").style.marginLeft = "26px";
  }

  function closeNavBig() {
    document.getElementById("mySidebar").style.width = "0";
    document.getElementById("main").style.paddingLeft = "0";
    document.getElementById("table-name").style.marginRight = "0";
    document.getElementById("table-name").style.marginLeft = "0";
  }
var openNav;
var closeNav;
function chooseMode() {
    if ($(window).width() < 960) {
               openNav = openNavSmall();
               closeNav = closeNavSmall();
        } else if ($(window).width() > 960) {
               openNav = openNavBig();
               closeNav = closeNavBig();      
        }
    }



$( window ).resize(function() {
     chooseMode();
});
chooseMode();

在重新加载页面之前，脚本无法正常工作

2 个答案: