Как показать ранее скрытый div, если размер порта просмотра изменен?

Question

Я разрабатываю адаптивный сайт с использованием Bootstrap 3. У меня есть скрипт JS show/hide, который доступен, когда на экране max-width 767px, но если я показал, а затем скрыл div в этом размере, когда я изменяю размер экрана обратно на рабочий стол, div все еще скрыт.

Есть ли, чтобы заставить div вернуться, если экран выходит за рамки 767px?

<script type="text/javascript">
    function showFunction() {
        document.getElementById("left-col").style.visibility="visible";
    }

    function hideFunction() {
        document.getElementById("left-col").style.visibility="hidden";
    }
</script>

Answer 1

Почему бы тогда не использовать медиа-запрос?

@media (max-width: 767px) {
  .left-col {
    display: none;
  }
}

http://jsfiddle.net/x9y1s14o/

Answer 2

Как правило, есть два способа сделать это:

1. Используйте CSS, чтобы заставить div показываться в одном размере и скрываться в другом
2. Используйте JavaScript для прослушивания изменений в браузере, а затем вызовите функцию для изменения состояния домена.

С помощью CSS вы говорите браузеру, что делать, когда окно больше, чем ваша точка останова, и что делать, если ваше окно меньше, чем ваша точка останова, что 767 px,

@media (min-width: 767px) {
  .left-col {
    visibility: visible;
  }
}

@media (max-width: 767px) {
  .left-col {
    visibility: hidden;
  }
}

С помощью JavaScript вы говорите браузеру вызывать функцию при изменении размера окна:

var breakpoint = 767;
window.onresize = function(event) {
    if (window.innerWidth >= breakpoint) {
       showFunction();
    } else { 
       hideFunction();
    }
};

Примечание. Ваши особенности могут немного отличаться, но это должно проиллюстрировать идею, стоящую за этим. Настройте детали, которые вам нужны.