У меня есть некоторые элементы, которые я хочу автоматически скрывать (отображать: нет), когда страница маленькая, и автоматически отображать (отображать: блокировать), когда страница большая.У меня это работает с bootstrap4, и это выглядит так:
<section id="categories">
<p data-toggle="categories-list">Categories</p>
<ul id="categories-list" class="d-none d-lg-block">
</ul>
</section>
Однако я также хотел бы, чтобы пользователи могли снова открывать список, когда он скрыт, или скрывать его, когда он отображается.Я пытаюсь добавить возможность переключения с помощью следующего кода:
$('[data-toggle]').each(function () {
$(this)[0].addEventListener('click', function() {
var target = $(this)[0].dataset.toggle;
$('#' + target).toggle('slow');
});
});
Это почти работает.Если я щелкну, когда ul скрыт (маленькая страница), он медленно расширяется, чтобы стать видимым, но затем он сразу же снова исчезает.Или, если он уже виден (на большой странице), он медленно исчезнет, но затем сразу же появится, как только анимация будет завершена.
Стили Boostrap применяют эти правила отображения, несмотря на изменения, которые я пытаюсьсделать, даже если размер страницы не меняется?
(я довольно новичок в разработке внешнего интерфейса в целом и в начальной загрузке в частности.)
Редактировать: я знаю, что в начальной загрузке естькакая-то «коллапсная» функциональность.Должен ли я пытаться использовать это вместо этого?Может быть, это будет лучше, чем пытаться делать jquery.
Edit2: Если посмотреть больше на коллапс, я вижу, что они используют 'data-toggle', который я и назвал своим.Может ли это быть частью проблемы?
Edit3: я попытался полностью удалить свой код javascript, вместо этого используя data-toggle и data-target, как в документации по bootstrap4.Я получаю точно такую же функциональность, что и мой код JavaScript.
Обновление после предложенного JasonB решения:
Новый html:
<section id="categories">
<p data-toggle="#categories-list">Categories</p>
<ul id="categories-list" class="custom-none custom-lg-block">
</ul>
</section>
Новый css:
.custom-none {
display: none;
}
@media (min-width: 992px) {
.custom-lg-block {
display: block;
}
}
Новый JavaScript:
$('[data-toggle]').each(function () {
$(this)[0].addEventListener('click', function() {
var target = $(this)[0].dataset.toggle;
if ($(target).css('display') == 'none') {
$(target).css('display', 'block');
} else {
$(target).css('display', 'none');
}
});
});
Это очень близко к работе.Страница загружается правильно, с отображением меню: нет на маленькой странице и отображением: блок на большой странице.Я могу изменить размер окна браузера, и меню раскрываются или сворачиваются по желанию, как только цель 992px будет достигнута.И я могу нажимать на меню, чтобы переключать их, и все работает как положено.
Единственная оставшаяся проблема - когда я нажимаю на меню и вручную устанавливаю их .css ('display'), это значение становитсязаблокирован. Изменение размера страницы больше не приводит к их свертыванию или расширению.Это не совсем нарушает условия сделки, так как основная цель этого заключается в том, чтобы работать с мобильными устройствами (когда они не будут внезапно увеличивать страницу), но на рабочем столе это может выглядеть странно, если они уменьшают окно при наличии всех меню.расширен.
Обновление:
Добавлен этот javascript и удалена минимальная ширина @media, и она работает:
window.addEventListener('resize', function(){
if ($(window).width() < 992) {
$('[data-toggle]').each(function () {
var target = $(this)[0].dataset.toggle;
$(target).css('display', 'none');
});
} else {
$('[data-toggle]').each(function () {
var target = $(this)[0].dataset.toggle;
$(target).css('display', 'block');
});
}
}, true);