Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Вставить ссылку в список. (https://javascript.ru/forum/events/82479-vstavit-ssylku-v-spisok.html)

ureech 13.05.2021 20:21

Вставить ссылку в список.
 
Всем привет. Нашёл меню в инете и хочу его приспособить на сайт. В процессе интеграции встала одна проблема. Прошу помочь. Меню и код можно посмотреть тут: 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

рони 13.05.2021 20:51

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>

ureech 13.05.2021 21:33

Красиво. Больше нечего сказать. Большое спасибо.

ureech 13.05.2021 21:40

Вопросик). С next() понятно, а вот с его параметрами нет. Можете в двух словах?

рони 13.05.2021 22:13

ureech,
когда добавляем стрелку, ставим метку что всё добавлено, метка посредством добавления класса add, осуществляется. $(this).next(":not(.add)") -- найти следующий элемент, но только в том случает если в нём нет класса add
если бесклассовый))) элемент есть, добавляем ему стрелку .prepend($('<li><a href="#" class="back"></a></li>'))
и ставим на лбу метку add .addClass("add")

иначе ничего не происходит если класс добавлен.

ureech 14.05.2021 07:35

Ок).Понятно.Спасибо.

ureech 18.05.2021 13:22

Привет. Сейчас,если я кликаю по ссылке "Показать меню" у меня открывается список пунктов меню. Но если я перешёл по ссылке в подменю, а потом ещё в подменю,открыл ссылку и перешёл на соответствующую страницу. Теперь, если я открываю меню у меня пункты главной страницы, а хотелось бы, что бы открывались пункты подъменю,из которых я перешёл на страницу. Каждому из пунктов,по которому я перешёл присваивается класс <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> нужно присваивать классы. Хелп)!

ureech 18.05.2021 14:01

На данный момент я тут
$(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){
//тут застрял)
}

}

рони 18.05.2021 15:14

ureech,
описание не осилил, но вот такой вариант ...
используйте hash -- при загрузке находим ссылку с таким hash -- и если такая ссылка есть -- берём нужных родителей и ставим им нужные классы.
var link = jQuery(`a[href^="${location.hash}"]`);
if(link.length) link.parents("ul").addClass("active");

ureech 18.05.2021 17:00

<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> присвоить класс.
С хешем не понял,как его можно в моём случае применить.

ureech 18.05.2021 17:26

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) // неопределенна
}

рони 18.05.2021 18:37

ureech,
видимо мы друг друга, не понимаем ...

ureech 18.05.2021 20:04

<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> присвоить класс

ureech 18.05.2021 20:37

Ну вроде получил. Хотя меню пока как нужно не работает)
$(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()
		}
		
	})

рони 18.05.2021 20:37

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 18.05.2021 20:40

Ну...У вас то покороче)))

рони 18.05.2021 20:41

ureech,
lis.length добавлено

рони 18.05.2021 20:54

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>

ureech 18.05.2021 20:56

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

рони 18.05.2021 21:03

ureech,
let lis = document.querySelectorAll("li.is-active");
lis.length && lis[lis.length - 1].parentNode.classList.add("test");

ureech 18.05.2021 21:08

Ок. Пойду разгребать всё это))). Спасибо.


Часовой пояс GMT +3, время: 18:01.