3
Мой код был очень запутанным, прежде чем я приношу свои извинения. Позвольте мне сделать это простым и удобочитаемым. В принципе, я хочу, чтобы при нажатии любого из 4 разделов он переходит в полноэкранный режим. И затем, когда вы нажмете его снова, он закрывает/переходит обратно в исходное положение. Это отлично работает для div 4, но первые 3 divs задают проблемы перехода при закрытии. В случае первого div, когда он закрывается, переход вообще отсутствует. Надеюсь, это понятно, и любая помощь будет оценена по достоинству. Ниже приведен мой упрощенный код.Как я могу дать divs равную силу позиции
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>layout</title>
<style>
html, body
{
height: 100%;
padding: 0;
margin: 0;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color:black;
font-size:300%;
}
#div1
{
background-color:red;
position:absolute;
transition:0.3s;
top:0;
left:0;
width: 50%;
height: 50%;
}
#div2
{
background-color:blue;
position:absolute;
top:0;
right:0;
transition:0.3s;
width: 50%;
height: 50%;
}
#div3
{
background-color:green;
position:absolute;
bottom:0;
left:0;
transition:0.3s;
width: 50%;
height: 50%;
}
#div4
{
background-color:yellow;
position:absolute;
bottom:0;
right:0;
transition:0.3s;
width: 50%;
height: 50%;
}
#div1.fullscreen
{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#div2.fullscreen
{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
}
#div3.fullscreen
{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
bottom: 0;
left: 0;
}
#div4.fullscreen
{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="div1">
div 1
</div>
<div id="div2">
div 2
</div>
<div id="div3">
div 3
</div>
<div id="div4">
div 4
</div>
<script>
$('#div1').click(function (e) {
$('#div1').toggleClass('fullscreen');
});
$('#div2').click(function (e) {
$('#div2').toggleClass('fullscreen');
});
$('#div3').click(function (e) {
$('#div3').toggleClass('fullscreen');
});
$('#div4').click(function (e) {
$('#div4').toggleClass('fullscreen');
});
</script>
</body>
</html>
Ничто не полный экран, когда я нажимаю на что-либо, и текст белого цвета, так что я ничего не вижу. Можете ли вы обновить свою демоверсию, чтобы было легко воспроизвести поведение? –