Переключить 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

SOLVED !!

SEE DEMO HERE

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

источник

2016-10-04 11:32:11 Eddy

Простая арифметика:

Допустим, вы хотите боковой панели, чтобы иметь 40px слева на экране, а остальные скрыты. Поэтому вы хотите переместить его налево (ширина - 40). То есть

$(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

Fantastic !!! Спасибо!! Могу я добавить еще один вопрос. После переключения боковой панели до 40 пикселей влево на экране, когда я масштабирую окно браузера больше или меньше, количество пикселей, оставшихся на экране, для изменения боковой панели из-за медиа-запросов. Как я могу сохранить его на 40 пикселей на экране в сворачивающемся состоянии боковой панели? Скрипт здесь: http://jsfiddle.net/100pvu95/17/ В расширенном состоянии его ширина должна меняться в зависимости от размера окна. – Eddy

В инструкции else, чтобы скрыть его, попробуйте установить ширину боковой панели на фиксированное значение, а затем измените ее, чтобы изменить размер в if. Он останется фиксированным, когда он будет скрыт. Хотя это немного взломать. http://jsfiddle.net/100pvu95/18/ Я помещаю 500 в пример, но вы можете решить, что это должно быть. – AgataB

Еще раз спасибо! Ближе, но не совсем. Да, в сжатом состоянии боковая панель поддерживает ту же величину при масштабировании окна. Большой! Но при расширении боковой панели снова она не возвращается к ширине, установленной в соответствующем медиа-кери, но идет до 100% окна. – Eddy

Вместо того чтобы устанавливать отрицательное значение левого в процентах, используйте ширину вашего элемента и установите значение левого в зависимости от ширины вашего элемента:

$("#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()*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 и выключить экран

ответ

Смежные вопросы