Логика - доступ к div по имени класса li

@Oslayer · Регистрация: 18.10.2012

Студворк — интернет-сервис помощи студентам

Есть во такой кусок html кода

HTML5
1
2
3
4
5
2   <li class="alt sfHover">
3   <a href="http://chemirus.tmweb.ru/16-keram">Керамика</a>
4   <div class="st" style="display: none; visibility: hidden;"></div>
5   <ul class="level2" style="display: none; visibility: hidden;"><ul>
6   </li>

Каким образом прописать следующую логику?

Если

HTML5
1
li class="alt sfHover"

то тогда

HTML5
1
div class="st"  style="display: bloc; visibility: visible;"

помогите пожалуйста с решением этой проблемы.

@Soldado · 19.10.2012, 15:50

<ul> нужно закрывать исправьте у себя в коде.
Сейчас для li задан class="alt sfHover" . Так как запись через пробел, то это равнозначно заданию сразу двух классов. Вам действительно нужно сразу два классa использовать?

Если не принципиально, то выборку можно сделать по одному из указанных классов и изменить свойства для дочерненго дива:

JavaScript
1
2
3
4
5
6
7
8
 <script type="text/javascript">
$(document).ready(function(){
$('.sfHover').children('div').css({
'display':'block',
'visibility':'visible'
})           
 });/*end  ready*/
 </script>

@Oslayer · 19.10.2012, 19:33 **[ТС]**

Использование двух классов принципиально, т.к. это является идентификатором. Если нет второго класса sfHover то div трогать не надо. Но если конструкция будет работать, по выборке .sfHover то и замечательно.
Сейчас буду проверять.

Проверил. Код не работает

Посмотрите пожалуйста, может поймете в чем проблема.
_chemirus.tmweb.ru - верхнее меню.
Пункт меню - керамика. если глянуть в исходный код или firebug там все станет наглядно.

@Soldado · 19.10.2012, 20:35

Скрипт рабочий для того того html - кода, что вы выложили.
Посмотрел Ваш сайт при наведении на керамику появляется блок с двумя ссылками "ручная" и "фабричная" . Вы разве не этого добивались?

Опишите детальнее - я вижу как есть, но не как Вы хотите. Когда добавляется изначально отсутствующий класс .sfHover?

@Oslayer · 19.10.2012, 20:42 **[ТС]**

Не совсем.. там есть такая строчка

HTML5
1
2
3
4
5
6
7
<li class="alt sfHover">
<a href="http://chemirus.tmweb.ru/16-keram">Керамика</a>
[B]<div class="st" style="display: block; visibility: visible;"></div>[/B]
<ul class="level2" style="display: none; visibility: hidden;">
<li class="alt1">
<li class="alt1">
</ul>

Мне нужно, что бы работало следующее условие
если li class="alt sfHover" тогда div class ="st" style="display:block; visibility: visible;"

Класс sfHover добавляется когда всплывает меню второго уровня, при наведении курсора мыши на меню "Керамика" при открытом firebug это хорошо видно

@Soldado · 19.10.2012, 21:44

Сообщение от Oslayer

Мне нужно, что бы работало следующее условие
если li class="alt sfHover" тогда div class ="st" style="display:block; visibility: visible;"

Так не получится сравнение, if(если - проверка условия) должна быть привязана к какому-либо событию, если событие не указано, то по умолчанию всё привязано к загрузке документа, а на момент загрузки li c указанным классом отсутствует. (Присвоение класса не является событием)
Привяжите код, что я дал, к событию hover вот так как на этой демо-странице.

@Oslayer · 19.10.2012, 22:19 **[ТС]**

Буду пробовать, хотя с ооочень плохо понимаю что нужно делать...

Предложили вот такой вариант еще.. но без особых комменатриев

JavaScript
1
2
3
var flag = document.getElementsByTagName('li')[0].className;
var pattern = /\bsfHover\b/;
if(flag.search(pattern) != -1){}else{}

На сколько я понимаю тут дожно быть действие

JavaScript
1
if(flag.search(pattern) != -1){вот здесь }else{ и здесь}

Вот что нужно там прописать.. ну нет у меня опыта в js

@Soldado · 19.10.2012, 22:28

Нельзя записать какое-то условие просто в коде и ждать, что если оно выполнится то сработает код. Режима ожидания для if не существует. Условие проверяется по какому-то событию (загрузка, клик, hover.....), а не само по себе.

Вам нужно найти участок кода, который добавляет класс sfHover при накрытии (hover) li "керамика" и добавить тот код, что я дал.

@Oslayer · 19.10.2012, 22:33 **[ТС]**

Не все так просто...

chemirus.tmweb.ru/modules/blocktopmenu/js/superfish-modified.js - вот здесь вся управляющая логика, в конце файла.
Вот этот кусок отвечает за .show

JavaScript
1
2
3
4
5
6
7
8
9
10
11
showSuperfishUl : function(){
            var o = sf.op,
                sh = sf.c.shadowClass+'-off',
                $ul = this.addClass(o.hoverClass)
                    .find('>ul:hidden').css('visibility','visible');
            sf.IE7fix.call($ul);
            o.onBeforeShow.call($ul);
            
            $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
            return this;
        }

Проще конечно было бы каким то образом добавить к этой функции еще такую логику

JavaScript
1
find('>div:hidden').css('visibility','visible');

но опять же как?

@Soldado · 19.10.2012, 22:43

Селекторы можно перечислять через запятую, попробуйте так:

JavaScript
1
.find('>ul:hidden,>div:hidden')

@Oslayer · 19.10.2012, 22:52 **[ТС]**

Спасибо за помошь! вопрос решен, практически так Вы и советовали

JavaScript
1
.find('>*:hidden').css('visibility','visible');

Добавлено через 1 минуту
Спасибо огромное Вам за помощь, вопрос решен с вашей помощью и соразработчика библиотеки jquery

JavaScript
1
.find('>*:hidden').css('visibility','visible');

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@Oslayer 0 / 0 / 0 Регистрация: 18.10.2012 Сообщений: 16
	19.10.2012, 19:33 [ТС]
	Использование двух классов принципиально, т.к. это является идентификатором. Если нет второго класса sfHover то div трогать не надо. Но если конструкция будет работать, по выборке .sfHover то и замечательно. Сейчас буду проверять. Проверил. Код не работает Посмотрите пожалуйста, может поймете в чем проблема. _chemirus.tmweb.ru - верхнее меню. Пункт меню - керамика. если глянуть в исходный код или firebug там все станет наглядно. 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	19.10.2012, 20:35
	Скрипт рабочий для того того html - кода, что вы выложили. Посмотрел Ваш сайт при наведении на керамику появляется блок с двумя ссылками "ручная" и "фабричная" . Вы разве не этого добивались? Опишите детальнее - я вижу как есть, но не как Вы хотите. Когда добавляется изначально отсутствующий класс .sfHover? 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	19.10.2012, 22:28
	Нельзя записать какое-то условие просто в коде и ждать, что если оно выполнится то сработает код. Режима ожидания для if не существует. Условие проверяется по какому-то событию (загрузка, клик, hover.....), а не само по себе. Вам нужно найти участок кода, который добавляет класс sfHover при накрытии (hover) li "керамика" и добавить тот код, что я дал. 1