在屏幕之外切换div和屏幕

我使用下面的代码部分切换屏幕div，并完全返回屏幕。该代码告诉“边栏”离屏幕有多远。但在我的情况下，由于媒体查询应用于边栏宽度，此功能有问题。因此，我需要代码不要说明边栏会移动多远，但是多少边栏会以像素的方式留在屏幕上。 The demo here（与媒体查询）。在屏幕之外切换div和屏幕

$(document).ready(function() { 
    $("#toggle").click(function() { 
     if($(this).hasClass('active')){ 
     $(this).removeClass('active'); 
     $("#sidebar").animate({ 
      left: '0%' 
     }); 
     } else { 
     $(this).addClass('active'); 
     $("#sidebar").animate({ 
      left: '-55%' 
     }); 
     } 
    }); 
});

来源

2016-10-01 Eddy

求解！

SEE DEMO HERE

$(document).ready(function() { 
    $("#togglebutton").click(function() { 
    var $container = $('#myToggleDiv'); 
    $container.toggleClass('hide'); 
    }); 
});

来源

2016-10-04 11:32:11 Eddy

简单的数学：

说你想上的边条具有40像素留在屏幕上，而其余的隐藏。所以你想把它左移（宽度 - 40）。即

$("#sidebar").animate({ 
    left: '-' + ($("#sidebar").width()*0.55) + 'px' 
});

检查：

$(document).ready(function() { 
 
     $("#toggle").click(function() { 
 
      if($(this).hasClass('active')){ 
 
       $(this).removeClass('active'); 
 
       $("#sidebar").animate({ 
 
        left: '0%' 
 
      }); 
 
     } else { 
 
      $(this).addClass('active'); 
 
      $("#sidebar").animate({ 
 
       left: - ($("#sidebar").width() - 40) 
 
      }); 
 
     } 
 
    }); 
 
});

html, body { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
#header { 
 
    width: 100%; 
 
    height: 20%; 
 
    float: left; 
 
    border: 1px solid; 
 
} 
 

 
#sidebar { 
 
    width: 70%; 
 
    height: 80%; 
 
    position: relative; 
 
    border: 1px solid; 
 
} 
 
#toggle { 
 
    width: 10%; 
 
    height: 40%; 
 
    margin-right: 6.5%; 
 
    margin-top: 3.5%; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>

来源

2016-10-01 20:56:54 AgataB

神奇！谢谢！！我可以补充一个问题吗？在屏幕上将侧边栏切换至40 px后，当我缩放浏览器窗口的大小时，由于媒体查询，侧栏中留下的像素数量发生变化。在边栏处于折叠状态的情况下，如何让它保持在40px的屏幕？小提琴在这里：http://jsfiddle.net/100pvu95/17/在其展开状态下，其宽度必须根据窗口大小而变化。 – Eddy

在else语句中隐藏它，尝试将侧边栏的宽度设置为固定值，然后将其更改回在if中可调整大小。隐藏时它将保持固定。虽然这有点破解。 http://jsfiddle.net/100pvu95/18/我在这个例子中放了500个，但是你可以解决它应该是的。 – AgataB

再次感谢！更接近，但不是那里。是的，在折叠状态下，缩放窗口时，侧边栏在视图中保持相同的数量。大！但是，当再次扩展侧边栏时，它不会回到适当媒体查询中设置的宽度，而是会达到窗口的100％。 – Eddy

而是以百分比设定负左值，根据您的元素的宽度使用元素的宽度和设置左值代码段：

$(document).ready(function() { 
 
    $("#toggle").click(function() { 
 
    if ($(this).hasClass('active')) { 
 
     $(this).removeClass('active'); 
 
     $("#sidebar").animate({ 
 
     left: '0' 
 
     }); 
 
    } else { 
 
     $(this).addClass('active'); 
 
     $("#sidebar").animate({ 
 
     left: '-' + ($("#sidebar").width()*0.55) + 'px' 
 
     }); 
 
    } 
 
    }); 
 
});

html, body { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
#header { 
 
    width: 100%; 
 
    height: 20%; 
 
    float: left; 
 
    border: 1px solid; 
 
} 
 

 
#sidebar { 
 
    width: 70%; 
 
    height: 80%; 
 
    position: relative; 
 
    border: 1px solid; 
 
} 
 
#toggle { 
 
    width: 10%; 
 
    height: 40%; 
 
    margin-right: 6.5%; 
 
    margin-top: 3.5%; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>

来源

2016-10-01 20:58:46 Dekel

非常感谢！ – Eddy

好主意在最后添加px，我忘记了这一点。 – AgataB

在屏幕之外切换div和屏幕

回答

相关问题