|
|
03.02.2013, 23:04
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Выпадающее меню на jquery
Очередная версия выпадающего меню с автоматическим сворачиванием ... натолкнуло творочество Deff, тут
сам код переключения получился компактным может кому пригодится 
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
li ul {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('li').click(function (event) {
$(this).parent().find("li ul:visible").slideUp()
if($(this).children("ul").is(":hidden"))$(this).children("ul").slideDown() ;
event.stopPropagation();
});
});
</script>
</head>
<body>
<ul class='left_nav_menu' id='nav_menu_content'>
<li><a href='#0'>Категория_1</a>
<ul>
<li><a href="#">Подкатегория_1</a>
<ul>
<li><a href="#">Подподкатегория_1</a></li>
</ul>
</li>
<li><a href="#">Подкатегория_2</a>
<ul>
<li><a href="#">Подподкатегория_2</a></li>
<li><a href="#">Подподкатегория_3</a></li>
</ul>
</li>
<li><a href="#">Подкатегория_3</a>
<ul>
<li><a href="#">Подподкатегория_4</a></li>
<li><a href="#">Подподкатегория_5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#0'>Категория_2</a>
<ul>
<li><a href="#">Подкатегория_4</a>
<ul class="material_cat">
<li><a href="#">Подподкатегория_6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>Подарки
<ul>
<li>Сувенирные изделия
<ul >
<li>Музыкальные</li>
<li>Шкатулки</li>
<li>Из дерева</li>
<li>Металлические</li>
</ul>
</li>
<li>Цветы
<ul>
<li>Розы
<ul >
<li>Чайная</li>
<li>Махровая</li>
<li>Чёрная</li>
</ul>
</li>
<li>Подарочные цветы
<ul >
<li>Гвоздика</li>
<li>Лилия</li>
<li>Орхидея</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Последний раз редактировалось рони, 03.05.2021 в 11:33.
|
|
04.02.2013, 00:29
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
рони,
код покороче, но имхо постольку, поскольку у Вас кликабельных ссылок нема
|
|
04.02.2013, 01:10
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от Deff
|
|
поскольку у Вас кликабельных ссылок нема
|
а можно кодом чего нема? |
|
04.02.2013, 01:30
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от рони
|
|
а можно кодом чего нема?
|
Вот
|
Цитата:
|
<ul class='left_nav_menu' id='nav_menu_content'>
<li><a href='#0'>Категория_1</a>
<ul>
<li><a href="#">Подкатегория_1</a>
<ul>
<li><a href="view_cat.php?...">Подподкатегория_1</a></li>
</ul>
</li>
|
Последний раз редактировалось Deff, 04.02.2013 в 01:42.
|
|
04.02.2013, 01:39
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Deff, всё одно непонимаю как это увеличивает или уменьшает код открытия закрытия
|
|
04.02.2013, 01:45
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от рони
|
|
всё одно непонимаю как это увеличивает или уменьшает код открытия закрытия
|
Забить(Там структура получается чуть длиннее для подготовки распарса массива объектов и сохранения в куки |
|
18.11.2013, 01:21
|
 |
Профессор
|
|
Регистрация: 05.03.2012
Сообщений: 477
|
|
|
Элегантное решение. Красиво.
|
|
11.08.2015, 13:57
|
|
Новичок на форуме
|
|
Регистрация: 28.12.2012
Сообщений: 7
|
|
|
Други, спасибо за код. Но не могли бы вы его дополнить таким образом, чтобы добавлялся класс 'active' к выбранному пункту меню? Спасибо.
|
|
11.08.2015, 14:52
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Выпадающее меню на jquery с подсветкой выбранного пункта
AMSPeople,
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
li ul {
display: none;
}
li.active::first-line {
background-color: #8A2BE2;
color: #FFFFFF;
}
li.active li.active::first-line {
background-color: #FF1493;
color: #FFFFFF;
}
li.active > a {
color: #FFFFFF;
}
li {
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
$("li").click(function(a) {
$(this).parent().find("li").removeClass("active").find("ul:visible").slideUp();
$(this).children("ul").is(":hidden") && $(this).addClass("active").children("ul").slideDown();
a.stopPropagation()
})
});
</script>
</head>
<body>
<ul class='left_nav_menu' id='nav_menu_content'>
<li><a href='#0'>Категория_1</a>
<ul>
<li><a href="#">Подкатегория_1</a>
<ul>
<li><a href="#">Подподкатегория_1</a></li>
</ul>
</li>
<li><a href="#">Подкатегория_2</a>
<ul>
<li><a href="#">Подподкатегория_2</a></li>
<li><a href="#">Подподкатегория_3</a></li>
</ul>
</li>
<li><a href="#">Подкатегория_3</a>
<ul>
<li><a href="#">Подподкатегория_4</a></li>
<li><a href="#">Подподкатегория_5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#0'>Категория_2</a>
<ul>
<li><a href="#">Подкатегория_4</a>
<ul class="material_cat">
<li><a href="#">Подподкатегория_6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>Подарки
<ul>
<li>Сувенирные изделия
<ul >
<li>Музыкальные</li>
<li>Шкатулки</li>
<li>Из дерева</li>
<li>Металлические</li>
</ul>
</li>
<li>Цветы
<ul>
<li>Розы
<ul >
<li>Чайная</li>
<li>Махровая</li>
<li>Чёрная</li>
</ul>
</li>
<li>Подарочные цветы
<ul >
<li>Гвоздика</li>
<li>Лилия</li>
<li>Орхидея</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Последний раз редактировалось рони, 03.05.2021 в 11:34.
|
|
11.08.2015, 15:20
|
|
Новичок на форуме
|
|
Регистрация: 28.12.2012
Сообщений: 7
|
|
|
рони,
Спасибо за ответ, но не совсем то, что нужно.
Нужно, чтобы класс active был только у одного элемента li, того, по которому кликнул юзер. "Чайная", "Махровая" и т.п. тоже должны иметь класс active, если по ним кликнули.
|
|
|
|
