Форум

Сергей Ракипов · #1 (**permalink**) 27.10.2021, 08:44

Есть вот такой код.

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 вписать в первую часть кода. То есть все тоже самое только мне нужно что бы два класса отвечало за эту функцию

Сергей Ракипов · #2 (**permalink**) 27.10.2021, 08:52

И я не знаю почему то когда я делаю вот так

<li class="kontakt"><a href="#kontakt">Контакты</a></li>

Да все срабатывает, но не идет переход на этот якорь. Если я этот якорь убираю от этого класса все работает.

od0201 · #3 (**permalink**) 27.10.2021, 14:33

добавьте элементу <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>

Сергей Ракипов · #4 (**permalink**) 28.10.2021, 07:06

od0201,
не могу добавить этот класс cd-nav-trigger

od0201 · #5 (**permalink**) 28.10.2021, 10:42

Сообщение от Сергей Ракипов

od0201,
не могу добавить этот класс cd-nav-trigger

дайте развернутый ответ, почему Вы не можете это сделать

Сергей Ракипов · #6 (**permalink**) 29.10.2021, 04:28

od0201,
А не могу потому что cd-nav-trigger это класс который зафиксирует элемент в левом в верхнем углу а для kontakt мне этого не нужно

voraa · #7 (**permalink**) 29.10.2021, 07:07

Ну припишите этим элементом еще один класс, по которому их оба можно находить. Его даже в CSS не надо описывать. Просто имя класса.

voraa · #8 (**permalink**) 29.10.2021, 07:30

Для краткости можете убрать всякие webkit, o, ms. Вы не найдете таких старых браузеров, которым это надо.

Сергей Ракипов · #9 (**permalink**) 29.10.2021, 08:33

voraa,
не понимаю

voraa · #10 (**permalink**) 29.10.2021, 12:41

Сообщение от Сергей Ракипов

не понимаю

Ну есть у вас
<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){

Сообщение от voraa

Для краткости можете убрать всякие webkit, o, ms. Вы не найдете таких старых браузеров, которым это надо.

Не надо
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){

Просто
$('.cd-navigation-wrapper').one('transitionend', function(){

Браузеров, которые не понимают transitionend уже не осталось.
С таким же успехом тогда нужно писать код, для браузеров, которые вообще ничего не слышали про transitionend со всеми префиксами или для старого firefox, где вроде такое событие и было, но работало 1 раз из трех, и все все равно через таймер делать приходилось.

Форум

Справочник

Discord чат

Курсы javascript