Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.10.2021, 09:44
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 469

Сократить код
Есть вот такой код.
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, 09:52
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 469

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

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

Да все срабатывает, но не идет переход на этот якорь. Если я этот якорь убираю от этого класса все работает.
Ответить с цитированием
  #3 (permalink)  
Старый 27.10.2021, 15:33
Аспирант
Отправить личное сообщение для od0201 Посмотреть профиль Найти все сообщения от od0201
 
Регистрация: 07.05.2020
Сообщений: 78

добавьте элементу <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, 27.10.2021 в 16:00.
Ответить с цитированием
  #4 (permalink)  
Старый 28.10.2021, 08:06
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 469

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

Последний раз редактировалось Сергей Ракипов, 28.10.2021 в 08:13.
Ответить с цитированием
  #5 (permalink)  
Старый 28.10.2021, 11:42
Аспирант
Отправить личное сообщение для od0201 Посмотреть профиль Найти все сообщения от od0201
 
Регистрация: 07.05.2020
Сообщений: 78

Сообщение от Сергей Ракипов Посмотреть сообщение
od0201,
не могу добавить этот класс cd-nav-trigger
дайте развернутый ответ, почему Вы не можете это сделать
Ответить с цитированием
  #6 (permalink)  
Старый 29.10.2021, 05:28
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 469

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

Последний раз редактировалось Сергей Ракипов, 29.10.2021 в 08:05.
Ответить с цитированием
  #7 (permalink)  
Старый 29.10.2021, 08:07
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,575

Ну припишите этим элементом еще один класс, по которому их оба можно находить. Его даже в CSS не надо описывать. Просто имя класса.
Ответить с цитированием
  #8 (permalink)  
Старый 29.10.2021, 08:30
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,575

Для краткости можете убрать всякие webkit, o, ms. Вы не найдете таких старых браузеров, которым это надо.
Ответить с цитированием
  #9 (permalink)  
Старый 29.10.2021, 09:33
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 469

voraa,
не понимаю
Ответить с цитированием
  #10 (permalink)  
Старый 29.10.2021, 13:41
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,575

Сообщение от Сергей Ракипов
не понимаю
Ну есть у вас
<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 раз из трех, и все все равно через таймер делать приходилось.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создать код CSS+HTML JamesMorgan Общие вопросы Javascript 2 11.08.2015 13:50
Код ответа сервера и обновление iframe alexdemi911 Общие вопросы Javascript 6 10.08.2015 23:30
Помогите к js коду, написать html код Modrih Элементы интерфейса 8 16.06.2015 19:08
Требуется выводить код рекламного блока Adsense из файла JavaScript??? speedflow Элементы интерфейса 0 26.05.2012 15:50
Получить код js-скрипта, находящегося в файле на сервере RomanA Общие вопросы Javascript 4 04.04.2012 09:53