!==
) и закрыт, т.е., открываете все, кроме закрываемого.document.addEventListener('click', e => {
const t = e.target;
const heading = t.closest('.panel-heading');
const nextStep = t.closest('.construct-btn');
const collapse =
heading ? heading.nextElementSibling :
nextStep ? t.closest('.panel').nextElementSibling.querySelector('.panel-collapse') :
null;
if (collapse) {
e.preventDefault();
t.closest('.panel-group').querySelectorAll('.panel-collapse').forEach(n => {
n.classList[n === collapse ? 'toggle' : 'remove']('in');
});
}
});
const accordeonTwo = () => {
const accordeonTwoParent = document.querySelector('#accordion-two'),
accordeonPanelHeading = accordeonTwoParent.querySelectorAll('.panel-heading'),
accordeonPanelContent = document.querySelector('.collapse');
accordeonPanelHeading.forEach((elem) => {
elem.addEventListener('click', (event) => {
event.preventDefault();
let target = event.target;
if (target.closest('.panel-heading')) {
accordeonPanelContent.classList.toggle('in');
}
});
});
};
accordeonTwo();
function getScroll() {
function animate(draw, duration) {
var start = performance.now();
requestAnimationFrame(function animate(time) {
var timePassed = time - start;
if (timePassed > duration) {
timePassed = duration;
}
draw(timePassed);
if (timePassed < duration) {
requestAnimationFrame(animate);
}
});
}
// Получаем навигационный блок и все ссылки в нем
let nav = document.getElementsByTagName('nav')[0],
links = nav.getElementsByTagName('a');
for (let i = 0; i < links.length; i++) {
// Вешаем событие на каждую кликнутую ссылку
links[i].addEventListener('click', () => {
// Отменяем стандартные действия браузера
event.preventDefault();
// Задаем переменную для ссылки в цикле
let link = links[i],
// Получаем в переменную значение атрибута href
linkAttr = link.getAttribute('href');
// Ищем в атрибуте href только буквенные значения
linkAttr = linkAttr.match(/[a-z]/gi);
// Полученный массив преобразовываем в строку
let linkStr = linkAttr.join(''),
// Ищем все элементы, в которых ID совпадает
// со значением полученной выше строки
div = document.getElementById(linkStr),
// Получем значение ID у найденных элементов
divId = div.getAttribute('id');
// Если значение href в кликнутой ссылке равно
// полученному значению ID то запускаем функцию
// с анимацией
if (linkStr == divId) {
// let divIdY = div.getBoundingClientRect().top;
// window.scrollBy(0, divIdY / 20 -3);
animate(function(timePassed) {
let divIdY = div.getBoundingClientRect().top - 80;
window.scrollBy(0, divIdY / 15);
}, 1500);
}
});
};
}
getScroll();
// через методы строки .bold() и .italics()
var html = "Понедельник".italics(); // html==='<i>Понедельник</i>';
var html = "Суббота".bold(); // html==='<b>Суббота</b>';
// вручную собрать строку
var dow = 'Понедельник';
var html = '<i>' + dow + '</i>'; // html==='<i>Понедельник</i>';
// то же самое в обратных кавычках
var dow = 'Понедельник';
var html = `<i>${dow}</i>`; // html==='<i>Понедельник</i>';
document.write()
– плохая практика, не надо его.const week = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];
for (let i = 0, len = week.length; i < len; i++) {
let html = week[i];
if (i === 0) html = html.italics(); // понедельник
else if (i > 4) html = html.bold(); // выходные
const div = document.createElement('div');
div.innerHTML = html;
document.body.appendChild(div);
}
if ((typeof (sum)) != 'string' && sum != '' && sum != null) {
sum != ''
!==
, чтобы не было преобразование типов, иначе sum != ''
будет false
при let sum = 0;
sum += prompt('Во сколько это обойдется?', '');
(typeof (sum)) != 'string'
function getArgument(str) {
if (typeof str != 'string') str+='';
if (str.length <= 10) return str;
str = str.slice(0, 10) + '...';
return str;
}
console.log(getArgument('test'));
console.log(getArgument('test_test_test'));
<a href="http://example.com/search?tag=хештег">#хэштег</a>
<a href="http://example.com/search?tag=%D1%85%D1%8D%D1%88%D1%82%D0%B5%D0%B3">#хэштег</a>
$(function() {
$('.menu-bottom__text').click(function(){
$('.menu-bottom').slideToggle();
$('.nav-icon-1').toggleClass('open');
});
});
<span class="burger"></span>
.burger{position:relative;height:22px;width:22px;background:red;display:inline-block;margin-right:15px;vertical-align:middle;transition:transform .2s cubic-bezier(.8,.5,.2,1.4)}
.menu-bottom__text:hover{color:red}
.burger.open{transform:rotate(90deg);background:none}
.burger:before,.burger:after{content:'';width:4px;height:22px;position:absolute;left:4px}
.burger:before{border-left:5px solid #e5e5e5;border-right:5px solid #e5e5e5}
.burger:after{width:22px;height:4px;left:0;top:4px;border-top:5px solid #e5e5e5;border-bottom:5px solid #e5e5e5}
.burger.open:before,.burger.open:after{position:absolute;left:10px;content:' ';height:28px;width:3px;background-color:red;border:none;top:-3px}
.burger.open:before{transform:rotate(45deg)}
.burger.open:after{transform:rotate(-45deg)}