【问题标题】:jQuery Side Navigation on jquery media queriesjQuery 媒体查询上的 jQuery 侧边导航
【发布时间】:2017-10-27 15:28:39
【问题描述】:

我在 jQuery 中有侧边导航操作:

$(function openSidebar()) {
   document.getElementById("sidebar").style.width = "250px";
   document.getElementById("wrapper").style.marginLeft = "250px";
}

function closeSidebar() {
   document.getElementById("sidebar").style.width = "0";
   document.getElementById("wrapper").style.marginLeft= "0";
}

我需要在移动设备上将宽度从 250 像素更改为 100%。如何在 jQuery 上获取它?

【问题讨论】:

标签: javascript jquery html css twitter-bootstrap


【解决方案1】:
   if ($(window).width() < 768) {
       $(function openSidebar()) {
           document.getElementById("sidebar").style.width = "100%";
           document.getElementById("wrapper").style.marginLeft = "100%";
       }

       function closeSidebar() {
           document.getElementById("sidebar").style.width = "0";
           document.getElementById("wrapper").style.marginLeft = "0";
       }
   } else {
       $(function openSidebar()) {
           document.getElementById("sidebar").style.width = "250px";
           document.getElementById("wrapper").style.marginLeft = "250px";
       }

       function closeSidebar() {
           document.getElementById("sidebar").style.width = "0";
           document.getElementById("wrapper").style.marginLeft = "0";
       }
   }

更新:

       if ($(window).width() < 768) {
           var width = "100%";
           var marginLeft = "100%";
       } else {
           var width = "250px";
           var marginLeft = "250px";
       }

        function openSidebar() {
           $("#sidebar").width(width);
           $("#wrapper").css('margin-left', marginLeft );
       };

【讨论】:

  • 不幸的是,它不起作用并在两个地方突出显示getElementById
  • @FilipKolendo 我添加了你的函数名称。
  • 当网站决定任意假设某个随机宽度意味着您在移动设备上时,这让我无所适从。
  • 现在它只使用 250px 并且 #wrapper 上的 marginLeft 一直是 0px :/
  • 在移动设备上它以 100% 的速度运行,但在普通笔记本电脑上,剩余边距仍然为 0px
猜你喜欢
  • 1970-01-01
  • 2018-01-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-07-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多