Есть код
.menu {
position: relative;
width: 370px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 0.5em 0 0.5em 0.3em;
cursor: pointer;
}
ul.level1 {
border: 1px solid thistle;
}
ul.level1>li {
background-color: #fff;
border-bottom: 1px solid thistle;
}
ul.level1>li:last-child {
border-bottom: none;
}
ul.level2 {
position: absolute;
top: 0;
left: 100%;
max-width: 559px;
max-height: 1010px;
padding: 0.5em 0.3em 0.5em 0.3em;
background-color: #fff;
border: 1px solid thistle;
visibility: hidden;
white-space: nowrap;
column-count: 2;
}
ul.level2>li {
padding: 0;
border-bottom: 1px solid #fff;
}
ul.level2>ul>li {
padding: 0;
}
ul.level2>li>ul>li {
padding: 0;
}
ul.level1>li:hover ul.level2 {
visibility: visible;
}
.menu a {
color: #333;
}
.alignblock {
text-align: center;
vertical-align: middle;
}
.submenu__title {
margin-bottom: 5px;
}
.submenu__title a {
display: block;
color: black;
font: 13px Roboto, Tachoma, Arial, sans-serif;
/* line-height: 1.5; */
text-decoration: none;
padding: 3px 5px;
}
.submenu__item {
/* margin-bottom: 0px; */
}
.submenu__item a {
display: block;
color: gray;
font: 13px Roboto, Tachoma, Arial, sans-serif;
text-decoration: none;
padding: 3px 5px;
}
<div class="mainwrap">
<div class="mainmenu">
<span>
<span>
<button data-toggle="dropdown" data-target="#menu" class="hamburger animated fadeInLeft noclose is-open" type="button">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</span>
<span><div class="label menu-label" id="myelement">КАТАЛОГ ТОВАРОВ</div></span>
</span>
<nav class="menu">
<ul class="level1">
<li id="l1">
<div class="alignblock">Бытовая техника для кухни</div>
<ul class="level2">
<li class="submenu">
<ul>
<li class="submenu__title">
<a href="#">Крупная бытовая техника</a>
</li>
<li class="submenu__item">
<a href="#">Холодильники</a>
</li>
<li class="submenu__item">
<a href="#">Морозильные камеры</a>
</li>
<li class="submenu__item">
<a href="#">Морозильные лари</a>
</li>
<li class="submenu__item">
<a href="#">Плиты газовые </a>
</li>
</ul>
<ul>
<li class="submenu__title">
<a href="#">New title</a>
</li>
<li class="submenu__item">
<a href="#">Холодильники</a>
</li>
<li class="submenu__item">
<a href="#">Морозильные камеры</a>
</li>
<li class="submenu__item">
<a href="#">Морозильные лари</a>
</li>
<li class="submenu__item">
<a href="#">Плиты газовые </a>
</li>
</ul>
</li>
</ul>
</li>
<li id="l2">
<div class="alignblock">Item 2</div>
</li>
<li id="l3">
<div class="alignblock">Item 3 +</div>
<ul class="level2">
<li>Sub-Item 3-1</li>
<li>Sub-Item 3-2</li>
<li>Sub-Item 3-3</li>
<li>Sub-Item 3-4</li>
<li>Sub-Item 3-5</li>
<li>Sub-Item 3-6</li>
<li>Sub-Item 3-7</li>
<li>Sub-Item 4-8</li>
</ul>
</li>
<li id="l2">
<div class="alignblock">Item 4</div>
</li>
<li id="l2">
<div class="alignblock">Item 5</div>
</li>
<li id="l2">
<div class="alignblock">Item 6</div>
</li>
</ul>
</nav>
</div>
</div>
Требуется записывать в переменные (начинающиеся со слова value
) тексты пунктов меню, на которых был произведен клик или был наведен курсор мыши
let valuemenuitem = '';
let valuecategoryitem = '';
let valuesubcategoryitem = '';
let clicklink = document.querySelectorAll('.nestedblock');
let categoryitemlink = document.querySelectorAll('.submenu_title > a');
let subcategoryitemlink = document.querySelectorAll('.submenu_item > a');
for (let j = 0; j < clicklink.length; j++) {
clicklink[j].addEventListener('hover', function(e) {
valuemenuitem = /*значение внутри <a href="" class="nestedblock"></a> */
}, true);
clicklink[j].addEventListener('click', function(e) {
valuemenuitem = /*значение внутри <a href="" class="nestedblock"></a> */
}, true);
}
/* let categoryitemlink = document.querySelectorAll('ul.level1>li:hover>ul.level2>li>ul>li'); */
for (let k = 0; k < categoryitemlink.length; k++) {
categoryitemlink[k].addEventListener('click', function(e) {
valuecategoryitem = /*значение внутри <li class="submenu_title"><a href="">...</a></li>*/
}, true);
}
for (let l = 0; l < categoryitemlink.length; l++) {
subcategoryitemlink[l].addEventListener('click', function(e) {
valuesubcategoryitem = /*значение внутри <li class="submenu_item"><a href="">...</a></li>*/
}, true);
}
Каким образом можно получить значения внутри ссылок - значение внутри <a href="" class="nestedblock">...</a>
, значение внутри <li class="submenu_title"><a href="">...</a></li>
и значение внутри <li class="submenu_item"><a href="">...</a></li>
?