Необходимо сбросить HTML-контент при изменении размера
У меня есть простой переключатель, который я настроил для отображения содержимого по-разному в зависимости от ширины экрана. Однако есть один аспект, с которым я не могу работать. Если размер экрана меньше желаемой ширины 600 пикселей, он изменяется на правильный контент, но когда ширина экрана затем увеличивается, он не возвращается к исходному содержимому по умолчанию, только к CSS по умолчанию (на основе запроса @media). Я думаю, мне нужно установить оригинал в переменной, а затем вызвать его снова?
Не могли бы вы помочь мне с тем, что недостает в этой головоломке?
$(function() {
function breadcrumbAdjustment(){
var screenWidth = $(window).width();
var originalBreadcrumb = $('.breadcrumbs').clone();
if (screenWidth <= 600) {
$('.breadcrumbs').html('<li class = "sidebar-toggle">mobile toggle goes here</li>');
$('.sidebar-toggle').on('click', function() {
$('#sidebar').fadeToggle("fast");
$('.sidebar-toggle').toggleClass('open');
});
}
else {
$('.breadcrumbs').replaceWith(originalBreadcrumb);
}
};
$(window).resize(breadcrumbAdjustment);
});
@HereticMonkey - не могли бы вы сформулировать свое решение в качестве ответа?
Что-то вроде @media (max-width: 600px) { .sidebar-toggle { display: block; } } .sidebar-toggle { display: none; } будет делать то же, что и ваш отредактированный фрагмент.
@HereticMonkey - К сожалению, это не достигает цели. Содержимое <div class = "breadcrumbs">, которое необходимо изменить в зависимости от размера экрана. На мобильных устройствах контент фактически становится переключателем и управляет другим <div>. Я добавлю к вопросу больше своего кода для лучшего контекста. Навигационной цепочкой по умолчанию для рабочего стола является текст, и мне нужно, чтобы он вернулся из переключателя к исходному тексту, когда размер экрана снова увеличится.
Я не понимаю, почему кода, который я предоставил в моем последнем комментарии, недостаточно. У вас может быть готовый обработчик события щелчка в документе. Поскольку переключатель будет невидимым на экранах большего размера, никто не будет нажимать на него, и обработчик событий не будет запущен. При более низком разрешении он будет виден и, следовательно, доступен для нажатия, а обработчик событий уже будет прикреплен. Возможно, вы слишком буквально думаете о процессах, необходимых для этой функции.
При необходимости оберните HTML-код рабочего стола в контейнер, который вы скрываете так же, как показываете HTML-код для мобильных устройств.
Я использую один div и пытаюсь изменить его содержимое в зависимости от размера экрана, поэтому нет второго div для отображения / скрытия и т. д.
Ответы 1
Я придумал решение, подумав о том, как сохранить исходное значение html. Я использовал localStorage, чтобы отслеживать исходную разметку при загрузке страницы, а затем вызывать ее в условном выражении после каждого изменения размера страницы.
$(function() {
var bcHTML = $('.breadcrumbs').html();
var originalBreadcrumb = localStorage.setItem('ogBC', bcHTML);
var getOriginalBreadcrumb = localStorage.getItem('ogBC');
function breadcrumbAdjustment(){
var screenWidth = $(window).width();
if (screenWidth <= 600) {
$('.breadcrumbs').html('<li class = "sidebar-toggle">Good to Know</li>');
$('.sidebar-toggle').on('click', function() {
$('#sidebar').fadeToggle("fast");
$('.sidebar-toggle').toggleClass('open');
});
}
else {
$('.breadcrumbs').html(getOriginalBreadcrumb);
}
};
$(window).resize(breadcrumbAdjustment);
});
Если у вас есть более элегантные решения, опубликуйте их.
originalBreadcrumbстанет новой навигационной цепочкой, если пользователь не перестанет изменять размер ровно на 600 пикселей. В противном случае он клонирует новый элемент. Вы должны уметь делать 99% этого с помощью CSS.