PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

jquery children поиск и применение стилей к нему

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)

Страниц (1): [1]

Описание: Выделение <li> если он родитель <ul>, и мышь находиться на <ul>

Поиск в теме | Версия для печати

Kubert	Отправлено: 11 Августа, 2011 - 16:31:19
Частый гость Покинул форум Сообщений всего: 186 Дата рег-ции: Февр. 2010 Помог: 3 раз(а)	Как выделить "родительский" <li> у "детеныша" <ul> Есть код который открывает "детей" у <li> CODE (javascript): скопировать код в буфер обмена $(document).ready(function(){ $("ul#topmenu li a").mouseover(function(){ $(this).parent().find("ul#subnav").show(); $(this).parent().hover(function(){ },function(){ $(this).parent().find("ul#subnav").hide(); }); }); $("ul#topmenu li ul li a").mouseover(function(){ $(this).parent().find("ul#subnav2").show(); $(this).parent().hover(function(){ },function(){ $(this).parent().find("ul#subnav2").hide(); }); }); }); Вот что собственно имеется в виду... (Отредактировано автором: 11 Августа, 2011 - 16:37:34)

Viper	Отправлено: 12 Августа, 2011 - 07:15:31
Активный участник Покинул форум Сообщений всего: 4555 Дата рег-ции: Февр. 2007 Откуда: Симферополь Помог: 98 раз(а)	Kubert html код меню приведите и укажите какой пункт выделить, а тоя чет не особо понял по картинке. ----- Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе

join	Отправлено: 12 Августа, 2011 - 09:31:01
Гость Покинул форум Сообщений всего: 91 Дата рег-ции: Февр. 2011 Помог: 1 раз(а)	CODE (html): скопировать код в буфер обмена <script> $(function(){ $("#subnav li a").hover(function(){ $("#topmenu>li").css('background-color','lime') }, function(){ $("#topmenu>li").css('background-color','dodgerblue') } ); }); </script> <ul id="topmenu"> <li style="background:dodgerblue;">MENY <ul id="subnav" style="position:absolute;"> <li><a>menu</a></li> <li><a>menu2</a></li> </ul> </li> </ul> Выделение родителя li (Отредактировано автором: 12 Августа, 2011 - 09:31:37) ----- - "Holy shit!" -девиз Холливуда - "Hello world " -девиз PhP

Kubert	Отправлено: 12 Августа, 2011 - 16:26:07
Частый гость Покинул форум Сообщений всего: 186 Дата рег-ции: Февр. 2010 Помог: 3 раз(а)	join немного не то, или я неправилльно вставил у меня применяется ко всем "родителям" Viper, нужно выделить: - "Категория 2" при наведении на "Категория 2.1" или "Категория 2.2" - "Категория 2" и "Категория 2.3" при наведении на "Категория 2.3.1" или "Категория 2.3.2" ОБНОВИЛ КАРТИНКУ ДЛЯ ЯСНОСТИ)))) см.сверху вот весь код: CODE (htmlphp): скопировать код в буфер обмена <script type="text/javascript"> $(document).ready(function(){ $("ul#topmenu li a").mouseover(function(){ $(this).parent().find("ul#subnav").show(); $(this).parent().hover(function(){ },function(){ $(this).parent().find("ul#subnav").hide(); }); }); $("ul#topmenu li ul li a").mouseover(function(){ $(this).parent().find("ul#subnav2").show(); $(this).parent().hover(function(){ },function(){ $(this).parent().find("ul#subnav2").hide(); }); }); }); </script> <ul id="topmenu"> <li><a href="#">Категория 1</a></li> <li><a href="#">Категория 2</a> <ul id="subnav"> <li><a href="#">Категория 2.1</a></li> <li><a href="#">Категория 2.2</a></li> <li><a href="#">Категория 2.3</a> <ul id="subnav2"> <li><a href="#">Подкатегория 2.3.1</a></li> <li><a href="#">Подкатегория 2.3.2</a></li> <li><a href="#">Подкатегория 2.3.3</a></li> <li><a href="#">Подкатегория 2.3.4</a></li> </ul> </li> <li><a href="#">Категория 2.4</a></li> <li><a href="#">Категория 2.5</a></li> </ul> </li> <li><a href="#">Категория 3</a></li> <li><a href="#">Категория 4</a></li> <li><a href="#">Категория 5</a></li> <li><a href="#">Категория 6</a></li> </ul> (Отредактировано автором: 12 Августа, 2011 - 17:23:34)

Viper	Отправлено: 15 Августа, 2011 - 07:31:00
Активный участник Покинул форум Сообщений всего: 4555 Дата рег-ции: Февр. 2007 Откуда: Симферополь Помог: 98 раз(а)	CODE (javascript): скопировать код в буфер обмена $("ul#topmenu li ul li a").mouseover(function(){ $(this).closest("ul").prev().addClass("highlight"); }, function(){ $(this).closest("ul").prev().removeClass("highlight"); }); как-то так. Негде протестировать. Если не заработавает, то отишите, вечером проверю. ----- Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе

SAD	Отправлено: 15 Августа, 2011 - 09:11:25
Постоянный участник Покинул форум Сообщений всего: 2508 Дата рег-ции: Май 2009 Откуда: Днепропетровск, Украина Помог: 75 раз(а)	CODE (javascript): скопировать код в буфер обмена $("ul#topmenu a").hover(function(){ $(this).closest("ul").prev().addClass("highlight"); }, function(){ $(this).closest("ul").prev().removeClass("highlight"); }); так еще попробуй

Kubert	Отправлено: 15 Августа, 2011 - 09:50:36
Частый гость Покинул форум Сообщений всего: 186 Дата рег-ции: Февр. 2010 Помог: 3 раз(а)	Спасибо, работает! Плюсану обоих) привожу рабочий код: Спойлер (Отобразить) CODE (htmlphp): скопировать код в буфер обмена <style> ul#topmenu{list-style:none;display:block;float:left;width:940px;height:47px;margin:9px 6px 0 6px; background:url(img/bg3.png) top left repeat-x;} ul#topmenu li {float:left;position:relative; display:block; width:auto; height:47px;background:url(img/bg5.png) top right no-repeat} ul#topmenu li a{color:#acd6ff;display:block;text-decoration:none;float:left;padding:11px 22px 23px 20px;text-transform:uppercase; text-shadow:1px 1px #234f7d;} ul#topmenu li a.highlight{color:#fff;} ul#topmenu li a:hover{background:url(img/bg4.png) center 37px no-repeat; color:#FFF;} ul#topmenu li ul#subnav {list-style:none;position:absolute;left:-9px;top:37px;margin:0;padding:0 0 14px 0;display:none;float:left;width:218px; height:auto; background:url(img/bg9.png) left bottom no-repeat; z-index:10;} ul#topmenu li ul#subnav li{clear:both;width:218px;height:auto; background:url(img/bg9.png) -218px 0px no-repeat;} html ul#topmenu li ul#subnav li a {float:none;display:block;border:0;padding:5px; margin:0 9px;border-top:1px solid #fff;border-bottom:1px solid #b8d4ee; text-transform:none; color:#333; text-shadow:1px 1px #fff;} html ul#topmenu li ul#subnav li a.parent {background: url(img/bg7.png) 190px 7px no-repeat;} html ul#topmenu li ul#subnav li a.highlight {background:#dbebfa url(img/bg7.png) 190px 7px no-repeat;} html ul#topmenu li ul#subnav li a:hover {background:#dbebfa;} html ul#topmenu li ul#subnav li a.parent:hover {background:#dbebfa url(img/bg7.png) 190px 7px no-repeat;} ul#topmenu li ul#subnav2 {list-style:none;position:absolute;left:218px;top:-2px;background:#246d96;margin:0;padding:0;display:none;float:left;width: 200px;z-index:10;box-shadow:0px 0px 3px #333; border-top:1px #ccc solid;} </style> <script type="text/javascript"> $(document).ready(function(){ $("ul#topmenu li a").mouseover(function(){ $(this).parent().find("ul#subnav").show(); $(this).closest("ul").prev().addClass("highlight"); $(this).parent().hover(function(){ },function(){ $(this).parent().find("ul#subnav").hide(); $(this).closest("ul").prev().removeClass("highlight"); }); }); $("ul#topmenu li ul li a").mouseover(function(){ $(this).parent().find("ul#subnav2").show(); $(this).parent().hover(function(){ },function(){ $(this).parent().find("ul#subnav2").hide(); }); }); }); </script> <ul id="topmenu"> <li><a href="javascript://">Категория 1</a></li> <li><a href="javascript://">Категория 2</a> <ul id="subnav"> <li><a href="javascript://">Категория 2.1</a></li> <li><a href="javascript://">Категория 2.2</a></li> <li><a href="javascript://" class="parent">Категория 2.3</a> <ul id="subnav2"> <li><a href="javascript://">Подкатегория 2.3.1</a></li> <li><a href="javascript://">Подкатегория 2.3.2</a></li> <li><a href="javascript://">Подкатегория 2.3.3</a></li> <li><a href="javascript://">Подкатегория 2.3.4</a></li> </ul> </li> <li><a href="javascript://">Категория 2.4</a></li> <li><a href="javascript://">Категория 2.5</a></li> </ul> </li> <li><a href="javascript://">Категория 3</a></li> <li><a href="javascript://">Категория 4</a></li> <li><a href="javascript://">Категория 5</a></li> <li><a href="javascript://">Категория 6</a></li> </ul>

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« JavaScript & VBScript »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.