Javascript-форум - Подсветка пункта меню

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Подсветка пункта меню - ч.3 (https://javascript.ru/forum/dom-window/75792-podsvetka-punkta-menyu-ch-3-a.html)

Подсветка пункта меню - ч.3

Как правильно перенести функционал скрипта №2 в скрипт №1 ? :blink:

Есть скрипт №1

function openLevel(e) {
$('.originalmenu span.ttnavigation').addClass('e');
alert('Скрипт сработал'); 
e.preventDefault();}
};

Вызывается по клику

<a  onclick="openLevel(event); href="#">Пункт меню 1 уровня</a>

Еcть доп скрипт #2

$('.originalmenu span.ttnavigation').click(function(){
		if ($(this).hasClass('ttopen')) {varche = true} else {varche = false};
		if(varche == false){
			$(this).addClass("ttopen");
			 $(this).parent().addClass('active_m');
			$(this).removeClass("ttclose");
			$(this).parent().children('ul').slideDown();
			varche = true;
		} else {	
			$(this).removeClass("ttopen");
			 $(this).parent().removeClass('active_m');
			$(this).addClass("ttclose");
			$(this).parent().children('ul').slideUp();
			varche = false;
		}
	});

Вызывается из

<span class="ttnavigation ttopen"><a href="javascript:void(0)"></a></span>

Как правильно перенести функционал скрипта №2 в скрипт №1 ? :blink:

<ul id="ma-mobilemenu" class="mobilemenu originalmenu nav-collapse collapse expand_menu">
-----------Блок меню 1----------------------
<li class="had_child">
<a href="#">Пункт меню 1 уровня</a>
<ul style="display: block;">
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Иван-чай</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
</ul>
<span class="ttnavigation ttopen"><a href="javascript:void(0)"></a></span>
</li>

-----------Блок меню 2----------------------
<li class="had_child">
<a href="#">Пункт меню 1 уровня</a>
<ul style="display: none;">
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
</ul>
<span class="ttnavigation ttclose"><a href="javascript:void(0)"></a></span>
</li>

И так далее

</ul>

Подозреваю что всё просто.. а как не знаю :(

Ничего не понял :( можно на моём примере разжевать?

Цитата:

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

можно на моём примере разжевать?

можно узнать что вы хотите сделать? алгоритм, нажали то, получили это.

Исходные данные

<ul style="display: none;">
.....
<span class="ttnavigation ttclose"><a href="javascript:void(0)"></a></span>

Кликаем сюда

<a  onclick="openLevel(event); href="#">Пункт меню 1 уровня</a>

Значения меняются вот здесь на

<ul style="display:[B] block[/B];">
.....
<span class="ttnavigation [B]ttopen[/B]"><a href="javascript:void(0)"></a></span>

Кликаем в другой блок с меню имеющий исходные данные то в предыдущем меняются на

<ul style="display:[B] none[/B];">
.....
<span class="ttnavigation [B]ttclose[/B]"><a href="javascript:void(0)"></a></span>

а в текущем

<ul style="display:[B] block[/B];">
.....
<span class="ttnavigation [B]ttopen[/B]"><a href="javascript:void(0)"></a></span>

oslayer,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .ttclose{
      background-color: #FF0000;
  }
  .ttopen{
      background-color: #228B22;
  }
  .ttnavigation:after{
      content: "span";
      color: #FFFFFF;
  }
  .had_child > ul{
      display: none;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var had_child = $(".had_child");
had_child.on("click", ">a", function(event) {
event.preventDefault();
var parent = $(this).parent()
parent.find("ul").toggle();
parent.find(".ttnavigation").toggleClass("ttopen ttclose")
var other_block = had_child.not(parent)
other_block.find("ul").hide();
other_block.find(".ttnavigation").removeClass("ttopen").addClass("ttclose");
})
});
  </script>
</head>

<body>
<ul id="ma-mobilemenu" class="mobilemenu originalmenu nav-collapse collapse expand_menu">
-----------Блок меню 1----------------------
<li class="had_child">
<a href="#">Пункт меню 1 уровня</a>
<ul>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Иван-чай</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
</ul>
<span class="ttnavigation ttclose"><a href="javascript:void(0)"></a></span>
</li>

-----------Блок меню 2----------------------
<li class="had_child">
<a href="#">Пункт меню 1 уровня</a>
<ul>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
</ul>
<span class="ttnavigation ttclose"><a href="javascript:void(0)"></a></span>
</li>
</ul>

</body>
</html>

Скрипт работает, ура!
Можно пояснить как и почему?
Здесь по классу .Had_child ловим 1 потомка? с тэгом <a > и обрабатываем событие - клик
А если тэгов <a> будет больше? то как это будет отрабатывать? или это любой тэг <a> в классе Had_child?

var had_child = $(".had_child");
had_child.on("click", ">a", function(event)

event.preventDefault();

Предотвращаем переход по ссылке

Можно описание(логику) работы вот этого блока подробнее?

var parent = $(this).parent()
parent.find("ul").toggle();
parent.find(".ttnavigation").toggleClass("ttopen ttclose")

$(function() {
var had_child = $(".had_child");
had_child.on("click", ">a", function(event) {
event.preventDefault();
var parent = $(this).parent()
parent.find("ul").toggle();
parent.find(".ttnavigation").toggleClass("ttopen ttclose")

var other_block = had_child.not(parent)
other_block.find("ul").hide();
other_block.find(".ttnavigation").removeClass("ttopen").addClass("ttclose");

Цитата:

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

А если тэгов <a> будет больше?

тогда селекторы будут иные.

Цитата:

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

или это любой тэг <a> в классе Had_child?

только "дети", без "внуков" и т.д.

Цитата:

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

Можно описание(логику) работы вот этого блока подробнее?

что конкретно непонятно?

var had_child = $(".had_child"); //все блоки
had_child.on("click", ">a", function(event) { //клик на конкретном блоке по ссылке первого уровня
event.preventDefault();// отмена перехода по ссылке
var parent = $(this).parent()// нашли блок в котором был клик
parent.find("ul").toggle();// нашли ul в блоке и открыли или закрыли
parent.find(".ttnavigation").toggleClass("ttopen ttclose")//нашли span и добавили или удалили классы
var other_block = had_child.not(parent) // нашли все блоки кроме этого
other_block.find("ul").hide();// в других блоках нашли ul и закрыли
other_block.find(".ttnavigation").removeClass("ttopen").addClass("ttclose");//нашли span в других блоках и удалии класс ttopen добавили  ttclose
})

Цитата:

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

Предотвращаем переход по ссылке

Цитата:

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

А зачем тогда ссылка? Это бессмысленно! Используйте кнопку или хотя бы роль кнопки.

А ещё можно использовать :focus-within, хотя смысл немного другой

<style type="text/css">

.had_child:not(:focus-within) .ttnavigation{
	background-color: #FF0000;
}
.had_child:focus-within .ttnavigation{
	background-color: #228B22;
}
.ttnavigation::after {
	content: "span";
	color: #FFFFFF;
}
.had_child:not(:focus-within) > ul {
	display: none;
}
.had_child > a { pointer-events: none; }

</style>

<ul id="ma-mobilemenu" class="mobilemenu originalmenu nav-collapse collapse expand_menu">
	-----------Блок меню 1----------------------
	<li class="had_child" tabindex="0">
		<a role="button">Пункт меню 1 уровня</a>
		<ul>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Иван-чай</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
		</ul>
		<span class="ttnavigation"><a role="button"></a></span>
	</li>

	-----------Блок меню 2----------------------
	<li class="had_child" tabindex="0">
	<a role="button">Пункт меню 1 уровня</a>
		<ul>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
		</ul>
		<span class="ttnavigation"><a role="button"></a></span>
	</li>
</ul>