Строки таблицы переключаются с подкатегориями

kl1pper

Всем привет,

У меня очень простая проблема, которую я не могу решить (я новичок в jQuery). Итак, у меня есть простая структура меню: Спорт => Страна => Лига/Лига
Футбол

Клубные матчи

Лига чемпионов
Лига Европы

Англия

1.Англия
2.Англия

Франция

1.Франция

Большой теннис

АТФ

Открытый чемпионат Австралии
Ролан Гаррос

ВТА

Открытый чемпионат США
Уимблдон

МФТ

Бухарест

Я хочу, чтобы это было свернуто на уровне «Спорт», тогда после расширения я должен увидеть другой уровень, поэтому в «Футбол: клубные матчи/Англия/Франция» каждую подкатегорию также можно развернуть. просто чтобы увидеть лиги в каждой из них. У меня есть скрипт jQuery: jQuery(документ).ready(функция() {
jQuery('.breakrow').click(function() {
$(this).nextUntil('tr.breakrow').slideToggle(200);
});
}); Это помогает, но только для одного уровня меню. Я сохранил здесь https://jsfiddle.net/qxpk5rf8/1/

Пожалуйста, если кто-нибудь знает, как это решить, дайте мне знать.

rusty2

Что за беспорядок. Это то, чего ты хочешь?

 


<html><head>


<script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8zLjQuMS9qcXVlcnkubWluWbu']https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js[/URL]"></script>


<style>


td{display:block;}


.breakrow{cursor:pointer;}


.breakrow1{display:none;font-size:90%;}


.breakrow2{display:none;font-size:80%;}


</style>


</head></body>


<table>


<tbody>


<tr>


<td class="breakrow">


<b>Recommended</b>


</td> 


<td class="breakrow1">


>Champions League


</td>


<td class="breakrow1">


>Europa League


</td>


</tr> 


<tr>


<td class="breakrow">


<b>Football</b>


</td>


<td class="breakrow1">


Club matches


</td>


<td class="breakrow2">


>>Champions League


</td>


<td class="breakrow2">


>>Europa League


</td>


<td class="breakrow1">


>England


</td>


<td class="breakrow2">


>>1.England


</td>


<td class="breakrow2">


>>2.England


</td>


<td class="breakrow1">


>France


</td>


<td class="breakrow2">


>>1.France


</td>


</tr> 


<tr>


<td class="breakrow">


<b>Tennis</b>


</td>


<td class="breakrow1">


>ATP


</td>


<td class="breakrow2">


>>Australian Open


</td>


<td class="breakrow2">


>>Roland Garros


</td>


<td class="breakrow1">


>WTA


</td>


<td class="breakrow2">


>>US Open


</td>


<td class="breakrow2">


>>Wimbledon


</td>


<td class="breakrow1">


>ITF


</td>


<td class="breakrow2">


>>Bucharest


</td>


</tr>


</tbody>


</table>


<script>


$(document).ready(function() {


$("td.breakrow").on("click",function(){


$(this).nextUntil('td.breakrow').slideToggle(200);


});


});


</script>


</body></html>

Код (разметка):

fawatejote

1) что синими бликами делают эти табличные данные? Большой совет: если есть только один столбец, это НЕ табличные данные, а TABLE — это совершенно неправильный HTML.

Семантика, попробуй как-нибудь. 2) То, что сверкает синим в 2020 году, делает этот бизнес перевернутым в JavaScript, не говоря уже о крушении поезда невежества, некомпетентности и некомпетентности разработчиков, которым является jQuery.

Выбросьте этого ошеломляющего тупого чудака на обочину. 3) Зачем вы гадите по всей разметке бесконечными бессмысленными классами просто так и style=""? Гораздо реже использование тега BOLD, когда это заголовки или резюме, НЕТ юридические лица. (он же грамматически жирный шрифт, для чего нужен тег !)

Самое печальное то, что HTML теперь может делать это без необходимости прибегать к трюкам с JavaScript.

 


<div class="detailGroup"><!-- use a class to describe WHAT these all are! -->


<details>


<summary>Recommended</summary>


<ul>


<li>Champions League</li>


<li>Europa League</li>


</ul>


</details><details>


<summary>Football</summary>


<ul>


<li>


<details>


<summary>Club matches</summary>


<ul>


<li>Champions League</li>


<li>Europa League</li>


</ul>


</details>


</li><li>


<details>


<summary>England</summary>


<ul>


<li>1. England</li>


<li>2. England</li>


</ul>


</details>


</li><li>


<details>


<summary>France</summary>


<ul>


<li>1. France</li>


</ul>


</details>


</li>


</ul>


</details><details>


<summary>Tennis</summary>


<ul>


<li>


<details>


<summary>ATP</summary>


<ul>


<li>Australian Open</li>


<li>Roland Garros</li>


</ul>


</details>


</li><li>


<details>


<summary>WTA</summary>


<ul>


<li>US Open</li>


<li>Wimbledon</li>


<ul>


</details>


</li><li>


<details>


<summary>ITF</summary>


<ul>


<li>Bucharest</li>


</ul>


</details>


</li>


</ul>


</details>


<!-- .detailGroup --></div>

Код (разметка): К сожалению, это не работает в IE или Edge (любой версии, ну, по крайней мере, пока Edge не станет Chrome).

Сейчас у меня нет времени перекодировать способ, который работает обратно в IE9, но он включает в себя установку скрытых флажков INPUT и использование соседнего селектора одного уровня с :checked в CSS. Опять же, НЕ работа JavaScript. Или табличные данные... или что-нибудь еще, что вы там делали.

wa1one1

Да, извиняюсь за беспорядок. Ну рядом, но: 1. Клубные матчи/Англия и Франция также должны переключить лиги в своих категориях. Я попробовал это, но когда вы играете со свертыванием и расширением, это вызывает странное поведение - чего-то не хватает.

 $(document).ready(function() {


$("td.breakrow").on("click",function(){


$(this).nextUntil('td.breakrow').slideToggle(200);


});


$("td.breakrow1").on("click",function(){


$(this).nextUntil('td.breakrow1').slideToggle(200);


});


});

Код (JavaScript):

Valdemar3

Я думаю, это из-за поведения CSS. С такой структурой макета вы не добьетесь того, чего хотите. К сожалению, я не силен в CSS и HTML. Где-то здесь прячется парень по имени @deathshadow. Иди и найди его. Если вам повезет, он придет и поможет вам. (Мне нравится фильм «Джон Уик 3», лол)

Похожие темы	Дата
Laracasts] Learning Vue 1.0 - Step By Step	19.10.2024, 18:10
Пацианский - React.js Для Начинающих	19.10.2024, 18:10
[seelentera] Javascript. Уровень 2	19.10.2024, 18:10
Javascript С Самого Начала (2016)	19.10.2024, 18:10
[дмитрий Охрименко] Видео Курс "angularjs Essential"	19.10.2024, 18:10
Отключить выбранную опцию в одном поле выбора, если она выбрана в другом поле выбора	19.10.2024, 18:10
Страница зависает при обновлении изображения	19.10.2024, 18:10
Добавьте атрибуты изображения в пользовательский js	19.10.2024, 18:10
Справка по точке останова Javascript	19.10.2024, 18:10
jQuery AJAX + двоичный/blob – вернуть и показать изображения/другие файлы	19.10.2024, 18:10

Строки таблицы переключаются с подкатегориями

kl1pper

rusty2

fawatejote

wa1one1

Valdemar3

I AM

Интересно