Не работает спойлер в спойлере

@Триколор · Регистрация: 20.01.2017

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

Здравствуйте

. У меня проблема спойлера. Для понимания проблемы привожу два варианта, которые отличаются наличием или отсутствием звёздочки (*) в пятой строке -

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head> 
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
<style>.del { display: none; } .del:not(:checked) + label + * { display: none; }.del:not(:checked) + label,
.del:checked + label {display: inline-block; padding: 0px 0px; border-radius: 0px; color: #fff; background: #F5F3E4; 
cursor: pointer;}.del:checked + label {background: #fff;}</style>
</head>
<body>
<input type="checkbox" id="ntv" class="del"/><label for="ntv" class="del"><div id="pakety"><a>ПАКЕТЫ КАНАЛОВ НТВ ПЛЮС</a></div></label>
<iframe src="NTV-Plus/Chanel.htm" marginwidth="0" width="730" height=3100 scrolling="no" frameborder="0"></iframe>
</body>
</html>

В первом варианте - со звёздочкой (*), работает кнопка спойлера, но не работают внутренние спойлеры во фрейме, которые должны открываться по ссылке "каналов 181 и т.д.".

Во втором варианте - без звёздочки (*), не работает кнопка спойлера, но работают внутренние спойлеры во фрейме, которые должны открываться по ссылке "каналов 181 и т.д.".

Прошу помочь чтобы открывались оба спойлера, внешний и внутренний во фрейме

Добавлено через 34 минуты
Прошу прощения, в коде приведённом выше, есть лишние символы. Вот оригинал

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head> 
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
<style>.del { display: none; } .del:not(:checked) + label + * { display: none; }.del:not(:checked) + label,
.del:checked + label {display: inline-block; padding: 0px 0px; border-radius: 0px; color: #fff; background: #F5F3E4; 
cursor: pointer;}.del:checked + label {background: #fff;}</style>
</head>
<body>
<input type="checkbox" id="ntv" class="del"/><label for="ntv" class="del"><div id="pakety"><a>ПАКЕТЫ КАНАЛОВ НТВ ПЛЮС</a></div></label>
<iframe src="NTV-Plus/Chanel.htm" marginwidth="0" width="730" height=3100 scrolling="no" frameborder="0"></iframe>
</body>
</html>

@t1m0n · 20.01.2017, 20:18

Сообщение от Триколор

внутренние спойлеры во фрейме

как оно вообще на мобилках работает?

Не по теме:

на мой взгляд плохой код на старнице

@Janosense · 20.01.2017, 21:58

Триколор, вам от этого легче не станет, но скажу что в Chrome вариант №1 работает, так как вам нужно, а вот в firefox, действительно проблема. Так что может проблема вовсе и не в *

@Триколор · 20.01.2017, 22:43 **[ТС]**

Знаете код лучше?

Добавлено через 3 минуты
С первого раза действительно работает как надо на Хроме и Файерфоксе, но стоит обновить страницу и проблема начинается

@mrtoxas · 20.01.2017, 23:04

Триколор, Ох вы и накрутили в стилях. Замените все стили во втором варианте этими:

CSS
1
2
3
4
5
iframe, input.del{
display:none;
}
input.del:checked ~iframe{
display:block; }

Если сработает, поглядим, как лучше это все организовать.

@Janosense · 20.01.2017, 23:26

Сообщение от Триколор

С первого раза действительно работает как надо на Хроме и Файерфоксе, но стоит обновить страницу

Chrome 55.0.2883.87 и после обновления страницы открываются все спойлеры, и внешний и внутренний. Загадка!)

@Триколор · 21.01.2017, 00:15 **[ТС]**

Вариант 2 (Обновлённый)

Добавлено через 10 минут

Работает, но при загрузке страницы на Файерфокс и открытии первого спойлера, второй не открывается. Нужно обновлять страницу, тогда открывается. Если же закрыть первый спойлер и обновить страницу, то снова второй перестаёт открываться. И т.д.

А Хром работает нормально

Вариант 2 (Обновлённый)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head> 
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
<style>
iframe, input.del{
display:none;
}
input.del:checked ~iframe{
display:block; }
</style>
</head>
<body>
<input type="checkbox" id="ntv" class="del"/><label for="ntv" class="del"><div id="pakety"><a>ПАКЕТЫ КАНАЛОВ НТВ ПЛЮС</a></div></label>
<iframe src="NTV-Plus/Chanel.htm" marginwidth="0" width="730" height=3100 scrolling="no" frameborder="0"></iframe>
</body>
</html>

Добавлено через 2 минуты
Извините, это я уже тут наверно того

зар-работался

Добавлено через 27 минут
Хром, Опера, Яндекс - полноценно работают

Файерфокс - работает только после обновления страницы браузера при открытом первом спойлере

I Explorer - практически ничего не видит

@mrtoxas · 21.01.2017, 00:58

Попробуйте третью версию.

HTML5
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    #chanelCheckbox{
      display:none;
    }
    .chanel-spoiler{
      height:0;
      overflow: hidden;
    }
    #chanelCheckbox:checked ~ .chanel-spoiler{
      height:auto;
    }
  </style>
</head>
<body>
  <input type="checkbox" id="chanelCheckbox">
  <label for="chanelCheckbox">Открыть спойлер</label>
  <div class="chanel-spoiler">
    <iframe width="730" height=3100 scrolling="no" src="http://твкерчь.рф/NTV-Plus/Chanel.htm" frameborder="0"></iframe>
  </div>
</body>
</html>

Пробуем и передаем пламенный привет разработчикам firefox.

@Триколор · 21.01.2017, 22:13 **[ТС]**

Очень признателен

файерфокс завёлся. Теперь все, кроме IExplorer, работают нормально на ПК Win-XP и смартфоне. А вот планшет выдаёт иероглифы вместо кирилицы во фрейме

Правда, я немного подогнал код чтобы всё отображалось:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<meta charset="Windows-1251" />
<title>Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<style>#chanelCheckbox{display:none;}.chanel-spoiler{height:0; overflow: hidden;}
#chanelCheckbox:checked ~.chanel-spoiler{height:auto;}</style>
</head>
<body>
<input type="checkbox" id="chanelCheckbox" class="del"/>
<label for="chanelCheckbox" class="del"><div id="pakety"><a>ПАКЕТЫ КАНАЛОВ НТВ ПЛЮС</a></div></label> 
<div class="chanel-spoiler"> 
<iframe width="730" height=3100 scrolling="no" src="http://твкерчь.рф/NTV-Plus/Chanel.htm" frameborder="0"></iframe></div>
<br><br><br><a href="http://твкерчь.рф/1.htm">Вариант 1</a>
<br><br><br><a href="http://твкерчь.рф/2.htm">Вариант 2 (Обновлённый)</a>
</body>
</html>

Вариант 3

@mrtoxas · 21.01.2017, 22:32

Плохой вариант. Зачем вы для chekbox и label задали одинаковый класс?

HTML5
1
<a>ПАКЕТЫ КАНАЛОВ НТВ ПЛЮС</a>

Это что? Уберите недоссылку.
И сделайте label блочным или строчно-блочным. После этого в ie должно быть все гуд.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
  <meta charset="Windows-1251" />
  <title>Document</title>
  <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
  <style>
    #chanelCheckbox{display:none;}.chanel-spoiler{height:0; overflow: hidden;}
    #chanelCheckbox:checked ~.chanel-spoiler{height:auto;}
    .del{display: block; /* или inline-block; */}
  </style>
</head>
<body>
  <input type="checkbox" id="chanelCheckbox"/>
  <label for="chanelCheckbox" class="del"><div id="pakety">ПАКЕТЫ КАНАЛОВ НТВ ПЛЮС</div></label>
  <div class="chanel-spoiler">
    <iframe width="730" height=3100 scrolling="no" src="http://твкерчь.рф/NTV-Plus/Chanel.htm" frameborder="0"></iframe></div>
</body>
</html>

С <div id="pakety"> тоже не совсем ясно, зачем оно там.

@Триколор · 23.01.2017, 11:21 **[ТС]**

- Извините, с классом ошибся. Вот чисто Ваш вариант - Вариант 4.
- Недоссылка мне нужна для стиля a:hover в <div id="pakety"> кнопки ссылки - Вариант 5. У меня на этом много сделано. Пример
- В IExplorer ничего существенно не меняется. Всё перекошено и нет ссылок. Возможно потому, что у меня стоит IExplorer устаревший на Win XP.
- "сделайте label блочным или строчно-блочным" - этого я не понимаю как делать

- На планшете всё нормально

. Иероглифов нет.

@mrtoxas · 23.01.2017, 11:46

Триколор, замените <a> на <span> и больше так не делайте.
Как сделать блочный или строчно-блочный label - привел в примере (9я строка).
И где доктайп на странице?

Вот вариант, без лишнего кода и фоновых картинок - iframe.rar.
Работает в Chrome, Firefox, Opera, IE11, Edge, Vivaldi, Yandex. Разбирайтесь.

@Триколор · 23.01.2017, 14:23 **[ТС]**

Ничего что страница насыщается символами, которые я старался убрать в отдельный документ стилей? Вроде поисковики не любят лишних (технических) символов на странице. Для индексирования, как лучше?

@mrtoxas · 23.01.2017, 14:36

Лучше выносить стили в .css файл. Я привел просто пример с работающими стилями, а вы уже смотрите по себе, куда вы их там выносите.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

Не работает спойлер в спойлере

Решение

Решение

@Janosense 45 / 41 / 22 Регистрация: 28.01.2015 Сообщений: 162
	20.01.2017, 21:58
	Триколор, вам от этого легче не станет, но скажу что в Chrome вариант №1 работает, так как вам нужно, а вот в firefox, действительно проблема. Так что может проблема вовсе и не в * 0

@Триколор 0 / 0 / 0 Регистрация: 20.01.2017 Сообщений: 40
	20.01.2017, 22:43 [ТС]
	Знаете код лучше? Добавлено через 3 минуты С первого раза действительно работает как надо на Хроме и Файерфоксе, но стоит обновить страницу и проблема начинается 0

@Триколор 0 / 0 / 0 Регистрация: 20.01.2017 Сообщений: 40
	23.01.2017, 11:21 [ТС]
	- Извините, с классом ошибся. Вот чисто Ваш вариант - Вариант 4. - Недоссылка мне нужна для стиля a:hover в <div id="pakety"> кнопки ссылки - Вариант 5. У меня на этом много сделано. Пример - В IExplorer ничего существенно не меняется. Всё перекошено и нет ссылок. Возможно потому, что у меня стоит IExplorer устаревший на Win XP. - "сделайте label блочным или строчно-блочным" - этого я не понимаю как делать - На планшете всё нормально . Иероглифов нет. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	23.01.2017, 11:46
	Триколор, замените <a> на <span> и больше так не делайте. Как сделать блочный или строчно-блочный label - привел в примере (9я строка). И где доктайп на странице? Вот вариант, без лишнего кода и фоновых картинок - iframe.rar. Работает в Chrome, Firefox, Opera, IE11, Edge, Vivaldi, Yandex. Разбирайтесь. 0

@Триколор 0 / 0 / 0 Регистрация: 20.01.2017 Сообщений: 40
	23.01.2017, 14:23 [ТС]
	Ничего что страница насыщается символами, которые я старался убрать в отдельный документ стилей? Вроде поисковики не любят лишних (технических) символов на странице. Для индексирования, как лучше? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	23.01.2017, 14:36
	Сообщение было отмечено Триколор как решение Решение Лучше выносить стили в .css файл. Я привел просто пример с работающими стилями, а вы уже смотрите по себе, куда вы их там выносите. 0