После применения JS к элементу не срабатывают стили

@Мамелюк · Регистрация: 21.06.2015

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

Добрый день, друзья!
Есть такой код. Когда я навожу мышью на "Категория 2" и жму в ней на любую из выпавших подкатегорий, то после нажатия срабатывает скрипт и все подкатегории скрываются - это так и задумано. Но вот почему после повторного навода курсора на "Категория 2" не происходит повторное выпадение подкатегорий? Ведь в CSS прописано:

CSS
1
#list li:hover .sublist_active {display:block;}

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    ul {list-style-type:none;margin:0;padding:0;}
 #list{display:inline-block;}
 #list li{position:relative;float:left;color:#fff;cursor:pointer;}
 #list li a{display:block;background:blue;color:#fff;}
 #list li.active span{display:block;background:red;}
 #list .sublist, #list .sublist_active {display:none;position:absolute;top:100%;left:0}
 #list li ul li {float:none;background:green;}
 #list li:hover .sublist, #list li:hover .sublist_active {display:block;}
 .sublist_active{background:red;}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
 $(document).ready(function(){
  $(".sublist_active > li").on('click', function(){
   $('#list li .sublist_active').css('display', 'none');
  });
 });
  </script>
 </head>
 <body>
  <ul id="list">
   <li><a href="#">Категория 1</a>
    <ul class="sublist">
     <li class="34-37">Подкатегория 1</li>
     <li class="34-65">Подкатегория 2</li>
    </ul>
   </li>
   <li class="active"><span>Категория 2</span>
    <ul class="sublist_active">
     <li class="21-62">Подкатегория 1</li>
     <li class="21-63">Подкатегория 2</li>
    </ul>
   </li>
  </ul>
</body>
</html>

@Richik · 21.11.2018, 20:11

JavaScript
1
$('#list li .sublist_active').css('display': 'block', 'position':'absolute', 'top':'100%','left':'0');

@j2FunOnly · 22.11.2018, 09:02

Мамелюк, потому что так

JavaScript
1
$('#list li .sublist_active').css('display', 'none');

вы прописываете стиль "инлайн"

HTML5
1
<ul class="sublist_active" style="display: none;">

Такая запись имеет более высокий приоритет над записью в таблице стилей, поэтому и не срабатывает

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

P. S. у вас же всё перед глазами, освойте наконец консоль браузера, там всё есть:

@Мамелюк · 22.11.2018, 09:45 **[ТС]**

j2FunOnly, спасибо за ответ. Да, уже понял почему не работает, сейчас пробую это победить без использования дополнительного JS.

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Мамелюк 1 / 1 / 0 Регистрация: 21.06.2015 Сообщений: 74
	22.11.2018, 09:45 [ТС]
	j2FunOnly, спасибо за ответ. Да, уже понял почему не работает, сейчас пробую это победить без использования дополнительного JS. 0