Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Сократить код (https://javascript.ru/forum/jquery/83247-sokratit-kod.html)

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

Сергей Ракипов 27.10.2021 08:52

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

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

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

od0201 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>

Сергей Ракипов 28.10.2021 07:06

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

od0201 28.10.2021 10:42

Цитата:

Сообщение от Сергей Ракипов (Сообщение 540962)
od0201,
не могу добавить этот класс cd-nav-trigger

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

Сергей Ракипов 29.10.2021 04:28

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

voraa 29.10.2021 07:07

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

voraa 29.10.2021 07:30

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

Сергей Ракипов 29.10.2021 08:33

voraa,
не понимаю

voraa 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 раз из трех, и все все равно через таймер делать приходилось.


Часовой пояс GMT +3, время: 12:04.