Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.05.2021, 20:21
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 516

Вставить ссылку в список.
Всем привет. Нашёл меню в инете и хочу его приспособить на сайт. В процессе интеграции встала одна проблема. Прошу помочь. Меню и код можно посмотреть тут: 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
Ответить с цитированием
  #2 (permalink)  
Старый 13.05.2021, 20:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,060

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>
Ответить с цитированием
  #3 (permalink)  
Старый 13.05.2021, 21:33
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 516

Красиво. Больше нечего сказать. Большое спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 13.05.2021, 21:40
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 516

Вопросик). С next() понятно, а вот с его параметрами нет. Можете в двух словах?
Ответить с цитированием
  #5 (permalink)  
Старый 13.05.2021, 22:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,060

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

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

Последний раз редактировалось рони, 13.05.2021 в 22:18.
Ответить с цитированием
  #6 (permalink)  
Старый 14.05.2021, 07:35
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 516

Ок).Понятно.Спасибо.
Ответить с цитированием
  #7 (permalink)  
Старый 18.05.2021, 13:22
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 516

Привет. Сейчас,если я кликаю по ссылке "Показать меню" у меня открывается список пунктов меню. Но если я перешёл по ссылке в подменю, а потом ещё в подменю,открыл ссылку и перешёл на соответствующую страницу. Теперь, если я открываю меню у меня пункты главной страницы, а хотелось бы, что бы открывались пункты подъменю,из которых я перешёл на страницу. Каждому из пунктов,по которому я перешёл присваивается класс <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 в 13:25.
Ответить с цитированием
  #8 (permalink)  
Старый 18.05.2021, 14:01
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 516

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

}
Ответить с цитированием
  #9 (permalink)  
Старый 18.05.2021, 15:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,060

ureech,
описание не осилил, но вот такой вариант ...
используйте hash -- при загрузке находим ссылку с таким hash -- и если такая ссылка есть -- берём нужных родителей и ставим им нужные классы.
var link = jQuery(`a[href^="${location.hash}"]`);
if(link.length) link.parents("ul").addClass("active");
Ответить с цитированием
  #10 (permalink)  
Старый 18.05.2021, 17:00
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 516

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Достать адрес родительской страницы и вставить в ссылку, находящуюся в iframe cirezha Общие вопросы Javascript 1 07.12.2020 19:21
Как в ссылку вставить ссылку на форму поиска? Espey Элементы интерфейса 39 26.04.2017 12:39
Как вставить ссылку JQurey_API jQuery 8 14.01.2014 14:31
Не могу вставить ссылку в код Salamander Общие вопросы Javascript 4 11.10.2013 14:49
Помогите вставить в форму не только чекбоксы но и выпадающий список seva_81 Серверные языки и технологии 3 20.09.2010 09:02