jQuery媒体查询的jQuery Side Navigation

时间:2017-05-26 16:53:02

标签: javascript jquery html css twitter-bootstrap

我在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";
}

我需要在移动设备上将宽度从250px更改为100%。我怎样才能在jQuery上获得它?

1 个答案:

答案 0 :(得分:0)

   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 );
       };