Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.02.2013, 23:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Выпадающее меню на 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.
Ответить с цитированием
  #2 (permalink)  
Старый 04.02.2013, 00:29
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

рони,
код покороче, но имхо постольку, поскольку у Вас кликабельных ссылок нема
Ответить с цитированием
  #3 (permalink)  
Старый 04.02.2013, 01:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Deff
поскольку у Вас кликабельных ссылок нема
а можно кодом чего нема?
Ответить с цитированием
  #4 (permalink)  
Старый 04.02.2013, 01:30
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 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.
Ответить с цитированием
  #5 (permalink)  
Старый 04.02.2013, 01:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Deff, всё одно непонимаю как это увеличивает или уменьшает код открытия закрытия
Ответить с цитированием
  #6 (permalink)  
Старый 04.02.2013, 01:45
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от рони
всё одно непонимаю как это увеличивает или уменьшает код открытия закрытия
Забить(Там структура получается чуть длиннее для подготовки распарса массива объектов и сохранения в куки
Ответить с цитированием
  #7 (permalink)  
Старый 18.11.2013, 01:21
Аватар для join
Профессор
Отправить личное сообщение для join Посмотреть профиль Найти все сообщения от join
 
Регистрация: 05.03.2012
Сообщений: 477

Элегантное решение. Красиво.
Ответить с цитированием
  #8 (permalink)  
Старый 11.08.2015, 13:57
Новичок на форуме
Отправить личное сообщение для AMSPeople Посмотреть профиль Найти все сообщения от AMSPeople
 
Регистрация: 28.12.2012
Сообщений: 7

Други, спасибо за код. Но не могли бы вы его дополнить таким образом, чтобы добавлялся класс 'active' к выбранному пункту меню? Спасибо.
Ответить с цитированием
  #9 (permalink)  
Старый 11.08.2015, 14:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Выпадающее меню на 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.
Ответить с цитированием
  #10 (permalink)  
Старый 11.08.2015, 15:20
Новичок на форуме
Отправить личное сообщение для AMSPeople Посмотреть профиль Найти все сообщения от AMSPeople
 
Регистрация: 28.12.2012
Сообщений: 7

рони,
Спасибо за ответ, но не совсем то, что нужно.
Нужно, чтобы класс active был только у одного элемента li, того, по которому кликнул юзер. "Чайная", "Махровая" и т.п. тоже должны иметь класс active, если по ним кликнули.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery ui layout + выпадающее меню Sveta jQuery 2 04.12.2012 09:04
Выпадающее меню на jQuery + галерея t_i_m_o_n Элементы интерфейса 3 09.05.2012 22:05
Горизонтальное выпадающее меню на jQuery hrundel jQuery 8 07.04.2011 17:36
Jquery выпадающее меню Коля jQuery 4 26.01.2011 17:00
Выпадающее меню JQuery black_mist jQuery 0 13.10.2010 12:44