#javascript #html #css
Вопрос:
Помогите, ребята…все работает, пока веб-сайт не перейдет на планшетный/мобильный…чем Джей-Эс начнет вести себя как сумасшедший. Я понимаю, что это потому, что есть два действия под одной функцией, но есть ли способ разделить это и/или ограничить добавление/удаление class .currentline указанной шириной экрана.
Когда он размером с планшет/мобильный телефон, у меня есть выпадающее меню, поэтому мне не нужны анимированные строки из .lineparent
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('#albmenu').addEventListener('click', (event) => {
if (event.target.tagName === 'A') {
document.querySelector('.current').classList.remove('current');
document.querySelector('.currentline').classList.remove('currentline');
let galleryName = event.target.getAttribute('data-gallery');
let lineName = event.target.getAttribute('data-line');
document.querySelector(`.${galleryName}`).classList.add('current');
document.querySelector(`.${lineName}`).classList.add('currentline');
}
});
}); .lineparent {
width: 35%;
height: 2px;
}
.line,
.line2,
.line3,
.line4,
.line5,
.line6 {
width: 100%;
height: 2px;
background-color: var(--textcol);
opacity: 0;
}
.currentline {
opacity: 1;
animation: linewidth 0.5s;
}
@keyframes linewidth {
from {
width: 0;
}
to {
width: 100%;
}
} <div class="albmenu"id="albmenu">
<ul id="gallery-links">
<li><div class="lineparent"><div class="line currentline"></div></div>
<a href="#gallery" data-gallery="grid" data-line="line">All</a></li>
<li><div class="lineparent"><div class="line2"></div></div>
<a href="#gallery" data-gallery="grid2" data-line="line2">Weddings</a></li>
<li><div class="lineparent"><div class="line3"></div></div>
<a href="#gallery" data-gallery="grid3" data-line="line3">Business</a></li>
<li><div class="lineparent"><div class="line4"></div></div>
<a href="#gallery" data-gallery="grid4" data-line="line4">Sports</a></li>
</ul>
<div class="dropdown" id="dropdown">
<button onclick="myFunction()" class="dropbtn">Category</button>
<div id="myDropdown" class="dropdown-content">
<a value="Family" href="#gallery" data-gallery="grid">All</a>
<a value= "" href="#gallery" data-gallery="grid2">Weddings</a>
<a value= "" href="#gallery" data-gallery="grid3">Business</a>
<a value= "" href="#gallery" data-gallery="grid4">Sports</a>
</div>
</div>
</div>
Комментарии:
1. Узнайте о запросах МУЛЬТИМЕДИА .
Ответ №1:
Если это стиль, то вы можете использовать медиа-запросы CSS для обработки этого, а если это какой-то JavaScript, то вы можете использовать API DOM для определения ширины вашего окна просмотра и выполнения кода или нет в зависимости от ширины.
Комментарии:
1. Я настроил отображение:нет для этих элементов в медиа-запросах меньшей ширины, но консоль возвращает,не может прочитать свойство «Список классов» со значением null при нажатии на раскрывающиеся параметры и портит альбом.
2. @t3rror было бы лучше, если бы вы предоставили полный код с медиа-запросами, но почему вы вызываете myфункцию при событии нажатия кнопки, когда вы настраиваете прослушиватель для нее в своем сценарии?
3. Моя функция предназначена для кнопки выпадающего меню. Прослушиватель событий предназначен для переключения между галереей данных и линией передачи данных. Я очень новичок в этом, мой друг 😀
4. @t3rror какой код для моей функции? может быть, настроить кодовую строку со всем кодом и поделиться ссылкой, было бы лучше, чтобы люди могли легко вам помочь 🙂
5. Я решил проблему с window.innerWidth , но если вы можете помочь упростить код, это было бы здорово. 🙂 Вот и ты, друг : codepen.io/vitezs/pen/XWgNzQx
Ответ №2:
Я решил это сам с помощью an innerWidth . Я изменил код на этот:
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('#albmenu').addEventListener('click', (event) => {
if (event.target.tagName === 'A') {
document.querySelector('.current').classList.remove('current');
if ((window.innerWidth > 1024)) {document.querySelector('.currentline').classList.remove('currentline');
}
let galleryName = event.target.getAttribute('data-gallery');
let lineName = event.target.getAttribute('data-line');
document.querySelector(`.${galleryName}`).classList.add('current');
if ((window.innerWidth > 1024)) { document.querySelector(`.${lineName}`).classList.add('currentline');}
}
});
});