Вставить ссылку в список.
Всем привет. Нашёл меню в инете и хочу его приспособить на сайт. В процессе интеграции встала одна проблема. Прошу помочь. Меню и код можно посмотреть тут: https://jsfiddle.net/ureech/krb81tep/9/
Суть работы. При клике на ссылку пункта меню (class="parent"),который содержит подменю, ul подменю присваиваются два класса. loaded и activity. Если в подменю есть ещё ссылки (class="parent"), то и там происходит тоже самое. Так вот нужно при клике на "parent" <li> <a href="#" class="parent">Компьютерная техника</a> <ul class=""> .... после <ul class=""> вставить ссылку <li><a href="#" class="back"></a></li> Часть js кода,отвечающая за присвоение и удаления классов такая
$(document).on("click", ".mobile_menu_container .parent", function(e) {
e.preventDefault();
$(".mobile_menu_container .activity").removeClass("activity");
$(this).siblings("ul").addClass("loaded").addClass("activity");
}),
$(document).on("click", ".mobile_menu_container .back", function(e) {
e.preventDefault();
$(".mobile_menu_container .activity").removeClass("activity");
$(this).parent().parent().removeClass("loaded");
$(this).parent().parent().parent().parent().addClass("activity");
//$(this).remove();
}),
Пытался создавать ссылку
var li = document.createElement('li');
var a = document.createElement('a');
a.href='#';
a.className ='back';
li.appendChild(a);
И затем в первом $(document) получать
var NodeList = document.querySelectorAll('ul.loaded li');
И в цикле через $(NodeList[i]).before(li)вставлять. Но никак. При первом клике по "parent" в NodeList null |
ureech,
:-?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body,
html {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 20px;
font-family: "Arial";
height: 100%;
min-height: 100%;
}
.menu_container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.mobile_menu {
font-size: 20px;
display: inline-block;
vertical-align: top;
line-height: 26px;
padding: 12px 25px;
color: #ffffff;
background: #4dadf7;
border-radius: 2px;
border: none;
width: auto;
margin: 0;
text-decoration: none;
-webkit-transition: all 400ms;
-moz-transition: all 400ms;
transition: all 400ms;
}
.mobile_menu:hover {
background: #228ae6;
cursor: pointer;
}
.mobile_menu_overlay,
.mobile_menu_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.mobile_menu_container,
.mobile_menu_container ul li ul {
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
transition: all 200ms
}
.mobile_menu_overlay {
display: none;
cursor: pointer;
z-index: 10200;
background: rgba(0, 0, 0, 0.5)
}
.mobile_menu_container {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
width: 300px;
overflow: hidden;
z-index: 10201;
background: #3884da
}
.mobile_menu_container.loaded {
-webkit-transform: translateX(0px);
transform: translateX(0px)
}
.mobile_menu_container .mobile_menu_content {
overflow: auto;
max-height: 100%;
padding-bottom: 30px
}
.mobile_menu_container ul {
margin: 0;
padding: 0
}
.mobile_menu_container ul li {
list-style: none
}
.mobile_menu_container ul li a {
display: block;
padding: 15px 20px;
line-height: 20px;
font-size: 16px;
background: #3884da;
color: #fff;
text-decoration: none;
font-weight: bold
}
.mobile_menu_container ul li a.parent {
padding-right: 50px;
background: #3884da url("images/arrow_right.svg") right 20px center no-repeat;
background-size: 20px
}
.mobile_menu_container ul li a.parent:hover {
background: #3c8de8 url("images/arrow_right.svg") right 20px center no-repeat;
background-size: 20px
}
.mobile_menu_container ul li a.back {
padding-left: 50px;
background: #3c8de8 url("images/arrow_left.svg") left 20px center no-repeat;
background-size: 20px;
box-sizing: border-box;
min-height: 50px
}
.mobile_menu_container ul li a.back:hover {
background: #3c8de8 url("images/arrow_left.svg") left 20px center no-repeat;
background-size: 20px
}
.mobile_menu_container ul li a:hover {
background: #3c8de8
}
.mobile_menu_container ul li ul {
-webkit-transform: translateX(300px);
transform: translateX(300px);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3884da;
z-index: 2
}
.mobile_menu_container ul li ul.loaded {
-webkit-transform: translateX(0px);
transform: translateX(0px)
}
.mobile_menu_container ul li ul.activity {
overflow-y: auto;
overflow-x: hidden
}
@media (max-width: 320px) {
.mobile_menu_container {
width: 240px
}
}
.back:after {
content: "\1F814";
font-size: 42px;
text-align: right;
display: block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$(document).on("click", ".mobile_menu_container .parent", function(e) {
e.preventDefault(), $(".mobile_menu_container .activity").removeClass("activity"), $(this).siblings("ul").addClass("loaded").addClass("activity");
$(this).next(":not(.add)").prepend($('<li><a href="#" class="back"></a></li>')).addClass("add")
}),
$(document).on("click", ".mobile_menu_container .back", function(e) {
e.preventDefault(), $(".mobile_menu_container .activity").removeClass("activity"), $(this).parent().parent().removeClass("loaded"), $(this).parent().parent().parent().parent().addClass("activity")
}),
$(document).on("click", ".mobile_menu", function(e) {
e.preventDefault(), $(".mobile_menu_container").addClass("loaded"), $(".mobile_menu_overlay").fadeIn()
}),
$(document).on("click", ".mobile_menu_overlay", function(e) {
$(".mobile_menu_container").removeClass("loaded"), $(this).fadeOut(function() {
$(".mobile_menu_container .loaded").removeClass("loaded"), $(".mobile_menu_container .activity").removeClass("activity")
})
})
});
</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>
<a href="#" class="parent">Компьютерная техника</a>
<ul>
<li><a href="#">Компьютерная техника</a></li>
<li>
<a href="#" class="parent">Ноутбуки и аксессуары</a>
<ul>
<li><a href="#">Ноутбуки и аксессуары</a></li>
<li><a href="#">Ноутбуки</a></li>
<li><a href="#">Аксессуары</a></li>
<li>
<a href="#" class="parent">Компьютеры и комплектующие</a>
<ul>
<li><a href="#">Компьютеры и комплектующие</a></li>
<li><a href="#">Компьютеры</a></li>
<li><a href="#">Моноблоки</a></li>
</ul>
</li>
<li><a href="#">Перифирия</a></li>
</ul>
</li>
<li><a href="#">Техника для печати</a></li>
</ul>
</li>
<li><a href="#">Строительство и ремонт</a></li>
</ul>
</div>
</div>
<div class="mobile_menu_overlay"></div>
</body>
</html>
|
Красиво. Больше нечего сказать. Большое спасибо.
|
Вопросик). С next() понятно, а вот с его параметрами нет. Можете в двух словах?
|
ureech,
когда добавляем стрелку, ставим метку что всё добавлено, метка посредством добавления класса add, осуществляется. $(this).next(":not(.add)") -- найти следующий элемент, но только в том случает если в нём нет класса add если бесклассовый))) элемент есть, добавляем ему стрелку .prepend($('<li><a href="#" class="back"></a></li>')) и ставим иначе ничего не происходит если класс добавлен. |
Ок).Понятно.Спасибо.
|
Привет. Сейчас,если я кликаю по ссылке "Показать меню" у меня открывается список пунктов меню. Но если я перешёл по ссылке в подменю, а потом ещё в подменю,открыл ссылку и перешёл на соответствующую страницу. Теперь, если я открываю меню у меня пункты главной страницы, а хотелось бы, что бы открывались пункты подъменю,из которых я перешёл на страницу. Каждому из пунктов,по которому я перешёл присваивается класс <li class="is-active">. Мне нужно получить предпоследний и его дочернему <ul> присваивать классы вместо $(".mobile_menu_container").
$(document).on("click", ".mobile_menu", function(e) {
e.preventDefault(), $(".mobile_menu_container").addClass("loaded"), $(".mobile_menu_overlay").fadeIn()
}),
Так вот мне никак не получить этот предпоследний. Последний вроде получаю, но потом не получить его родительский <ul>. То есть html такой примерно <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><li class="is-active"> <a href="#" class="">Компьютерная техника3</a> </li></ul></li></ul></li></ul> </div> </div> Если я на странице Компьютерная техника3, то её <ul> нужно присваивать классы. Хелп)! |
На данный момент я тут
$(document).on("click", ".mobile_menu", function(e) {
e.preventDefault();
let menu = document.querySelector('.mobile_menu_container');
let add = menu.querySelectorAll('li.is-active');
let last;
for (var i = 0; i < add.length; i++) {
k=(add.length)-2;
last = add[k];
}
if(last){
//тут застрял)
}
}
|
ureech,
описание не осилил, но вот такой вариант ... используйте hash -- при загрузке находим ссылку с таким hash -- и если такая ссылка есть -- берём нужных родителей и ставим им нужные классы.
var link = jQuery(`a[href^="${location.hash}"]`);
if(link.length) link.parents("ul").addClass("active");
|
<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>
Нужно последнему <ul> присвоить класс. С хешем не понял,как его можно в моём случае применить. |
| Часовой пояс GMT +3, время: 11:32. |