Сократить код
Есть вот такой код.
jQuery(document).ready(function($){
var isLateralNavAnimating = false;
//open/close lateral navigation
$('.cd-nav-trigger').on('click', function(event){
event.preventDefault();
//stop if nav animation is running
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true;
$('body').toggleClass('navigation-is-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
});
Где при клике на cd-nav-trigger добавляется или убирается класс navigation-is-open И я вот что сделал
jQuery(document).ready(function($){
var isLateralNavAnimating = false;
//open/close lateral navigation
$('.cd-nav-trigger').on('click', function(event){
event.preventDefault();
//stop if nav animation is running
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true;
$('body').toggleClass('navigation-is-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
});
jQuery(document).ready(function($){
var isLateralNavAnimating = false;
//open/close lateral navigation
$('.kontakt').on('click', function(event){
event.preventDefault();
//stop if nav animation is running
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true;
$('body').toggleClass('navigation-is-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
});
так как не знаю как kontakt вписать в первую часть кода. То есть все тоже самое только мне нужно что бы два класса отвечало за эту функцию |
И я не знаю почему то когда я делаю вот так
<li class="kontakt"><a href="#kontakt">Контакты</a></li> Да все срабатывает, но не идет переход на этот якорь. Если я этот якорь убираю от этого класса все работает. |
добавьте элементу <li class="kontakt"> еще один класс "cd-nav-trigger"
document.querySelector('.kontakt').classList.add(' cd-nav-trigger') и событие $('.cd-nav-trigger').on('click', function(event)... сработает на <li class="kontakt cd-nav-trigger">
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<button class="kontakt">kontakt</button>
<button class="cd-nav-trigger">cd-nav-trigger</button>
<h3 class="text"></h3>
<script>
document.querySelector('.kontakt').classList.add('cd-nav-trigger')
$('.cd-nav-trigger').on('click', function(event){
alert(`класс "${event.target.className}"`)
})
</script>
</body>
</html>
|
od0201,
не могу добавить этот класс cd-nav-trigger |
Цитата:
|
od0201,
А не могу потому что cd-nav-trigger это класс который зафиксирует элемент в левом в верхнем углу а для kontakt мне этого не нужно |
Ну припишите этим элементом еще один класс, по которому их оба можно находить. Его даже в CSS не надо описывать. Просто имя класса.
|
Для краткости можете убрать всякие webkit, o, ms. Вы не найдете таких старых браузеров, которым это надо.
|
voraa,
не понимаю |
Цитата:
<button class="kontakt">...</button> <button class="cd-nav-trigger">...</button> Напишите <button class="kontakt xyz">...</button> <button class="cd-nav-trigger xyz">...</button> (Вместо xyz - что угодно) И потом в коде $('.xyz').on('click', function(event){ Цитата:
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ Просто $('.cd-navigation-wrapper').one('transitionend', function(){ Браузеров, которые не понимают transitionend уже не осталось. С таким же успехом тогда нужно писать код, для браузеров, которые вообще ничего не слышали про transitionend со всеми префиксами или для старого firefox, где вроде такое событие и было, но работало 1 раз из трех, и все все равно через таймер делать приходилось. |
| Часовой пояс GMT +3, время: 22:08. |