У меня есть эта веб-страница, где, когда вы нажимаете изотопный блок, она заполняет страницу, а затем отфильтровывает все остальные блоки. Когда я снова нажимаю блок, он должен вернуться в исходное местоположение. Моя текущая проблема заключается в том, что страница не перемещается с блоком (вам придется прокручивать все сообщения снова)JQuery выполняется в порядке в Safari - Isotope
Я решил, что после того, как я переделаю изотопные блоки в сетке, я расскажу, на какой странице соответствующий id (не нравится это, хотя из-за того, что мне нужно назначать идентификатор для каждого блока)
В настоящий момент код работает в Chrome, но не работает в сафари. Я думаю, что происходит, что связь происходит перед ретрансляцией и, таким образом, остается в верхней части страницы.
Вот мой JQuery:
$(document).ready(function(){
var $container = $('.news').isotope({
itemSelector: '.news-block',
layoutMode: 'masonry',
getSortData: {
type: '[data-type]', // value of attribute
time:'[content]'
}/*
sortBy:'type',
sortAscending: true*/
});
$container.on('click', '.news-block', function() {
$(this).toggleClass('expand');
if ($(this).hasClass('expand')) {
$container.isotope({ filter: '.expand' });
$container.isotope('layout');
} else {
$container.isotope({ filter: '*' });
$container.isotope('layout');
window.location.href = '#'+$(this).attr("id");
}
});
});
Css для блоков (показывает расширение в ширину):
.news-block {
width:30.6666666666%;
margin:1%;
padding:2%;
float:left;
box-sizing: border-box;
word-wrap: break-word;
background-color: white;
color:#888;
}
.news-block.expand {
width:96%;
}
Я надеюсь, что есть простое решение. Пытался использовать ожидание, пока макет завершится изотопом, но не сработает. Также попытался задержка, и это тоже не сработало. Какие-либо предложения. (Я новичок в JQuery, HTML и CSS)
может быть, вы могли бы использовать 'scrollTo()' вместо изменения хэш. – Barmar
Как мне это сделать? Новое для jquery/javascript просто опубликуйте в разделе ответа, если у вас есть идея – Jetstream5500
Nvm Я решил проблему. Могу ли я опубликовать ответ на свой вопрос? – Jetstream5500