在屏幕之外切換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和屏幕

回答

相關問題