Как преобразовать вкладки и вложенные вкладки в выпадающие элементы и вложенные элементы, используя HTML и CSS - PullRequest
0 голосов
/ 13 мая 2019

В HTML, CSS и ОТВЕТСТВЕННОМ веб-дизайне, как превратить вкладки в выпадающие элементы. Я не хочу использовать любые сторонние библиотеки, такие как начальная загрузка. Я в значительной степени проделал большую угловую работу в проекте. Я тоже не хочу использовать угловой материал. У меня есть это конкретное требование в моем проекте, у меня есть HTML TABS и некоторые вкладки имеют SUB TABS в них. Я хочу, чтобы вкладки были отзывчивыми. Я хочу, чтобы вкладки (TABS и SUB TABS) становились выпадающими меню в мобильной точке останова. Я получил пример по ссылке ниже, но у него нет вложенных вкладок, и, очевидно, когда он переходит в мобильное представление, он не может отображать вложенные элементы, которых у него нет. Я попытался изменить пример, включив вложенные вкладки, но у меня это не сработало. Цените любую помощь, если они могут изменить приведенный ниже пример с вложенными вкладками, и в мобильном представлении он преобразуется в выпадающие элементы и вложенные элементы. Вот лучшая на данный момент ссылка, которую я нашел.

https://codepen.io/jpkempf/pen/Awxbo

$(document).on('click', 'li', function(){

  $('li').removeClass('active');
  $('ul').toggleClass('expanded');
  $(this).addClass('active');
});
...