let hash;var link;
$(document).on("click", ".mobile_menu_container .parent", function(e) {
e.preventDefault();
var $this = $(this);
hash = $this.attr('href');
link = jQuery('a[href^="${location.hash}"]');
}
$(document).on("click", ".mobile_menu", function(e) {
e.preventDefault();
alert(link) // неопределенна
}
|
ureech,
видимо мы друг друга, не понимаем ... |
<div class="menu_container"> <a href="#" class="mobile_menu">Показать меню</a> </div> <div class="mobile_menu_container"> <div class="mobile_menu_content"> <ul> <li class="is-active"> <a href="#" class="">Компьютерная техника1</a> <ul><li class="is-active"> <a href="#" class="">Компьютерная техника2</a> <ul class="СЮДА"><li class="is-active"> <a href="#" class="">Компьютерная техника3</a> </li></ul></li></ul></li></ul> </div> </div> Нужно получить последний <li class="is-active"> и его <ul> присвоить класс |
Ну вроде получил. Хотя меню пока как нужно не работает)
$(document).on("click", ".mobile_menu", function(e) {
e.preventDefault();
let menu = document.querySelector('.mobile_menu_container');
let add = menu.querySelectorAll('li.is-active');
link = add[(add.length)-1];
link = $(link).parent();
console.log($(link))
if(link){
$(".mobile_menu_container").addClass("loaded");
$(".mobile_menu_overlay").fadeIn();
$(link[0]).addClass("loaded").addClass("activity");
}else{
$(".mobile_menu_container").addClass("loaded"), $(".mobile_menu_overlay").fadeIn()
}
})
|
ureech,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css"> ul.test{
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="menu_container">
<a href="#" class="mobile_menu">Показать меню</a>
</div>
<div class="mobile_menu_container">
<div class="mobile_menu_content">
<ul>
<li class="is-active">
<a href="#" class="">Компьютерная техника1</a>
<ul><li class="is-active">
<a href="#" class="">Компьютерная техника2</a>
<ul class="СЮДА"><li class="is-active">
<a href="#" class="">Компьютерная техника3</a>
</li></ul></li></ul></li></ul>
</div>
</div>
<script>
let lis = [...document.querySelectorAll("li.is-active")];
lis.length && lis.pop().parentNode.classList.add("test");
</script>
</body>
</html>
|
Ну...У вас то покороче)))
|
ureech,
lis.length добавлено |
ureech,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
ul.test{
background-color: #FF0000;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$("li.is-active:last").parent().addClass("test");
});
</script>
</head>
<body>
<div class="menu_container">
<a href="#" class="mobile_menu">Показать меню</a>
</div>
<div class="mobile_menu_container">
<div class="mobile_menu_content">
<ul>
<li class="is-active">
<a href="#" class="">Компьютерная техника1</a>
<ul><li class="is-active">
<a href="#" class="">Компьютерная техника2</a>
<ul class="СЮДА"><li class="is-active">
<a href="#" class="">Компьютерная техника3</a>
</li></ul></li></ul></li></ul>
</div>
</div>
</body>
</html>
|
add.length && add.pop().parentNode.classList.addClass("loaded").addClass("activity");
[HTML]Uncaught TypeError: add.pop is not a function[/HTML]
console.log(add): NodeList(3) [ li.is-active, li.is-active, li.is-active] 0: <li class="is-active"> 1: <li class="is-active"> 2: <li class="is-active"> length: 3 |
ureech,
let lis = document.querySelectorAll("li.is-active");
lis.length && lis[lis.length - 1].parentNode.classList.add("test");
|
| Часовой пояс GMT +3, время: 14:56. |