Скрытие - показ элементов по чекбоксу
Есть сложная разметка:
<li id="customize-control-12" class="customize-control"> <div class="parent"> <div class="onoffswitch"> <input type="checkbox" id="switch" name="switch" class="onoffswitch-checkbox" value=""> <label class="onoffswitch-label" for="switch"></label> </div> <span class="customize-control-title onoffswitch_label">Родитель</span> </div> </li> <li id="customize-control-2" class="customize-control"> <div class="children"> Дочка (должен скрываться) </div> </li> <li id="customize-control-445" class="customize-control"> <div class="children"> Дочка (должен скрываться) </div> </li> <li id="customize-control-23" class="customize-control"> <div class="some-class"> Не должен скрываться </div> </li> <li id="customize-control-435" class="customize-control"> <div class="checkbox_switch parent"> <div class="onoffswitch"> <input type="checkbox" id="switch" name="switch" class="onoffswitch-checkbox" value=""> <label class="onoffswitch-label" for="switch"></label> </div> <span class="customize-control-title onoffswitch_label">Родитель</span> </div> </li> <li id="customize-control-426" class="customize-control"> <div class="children"> Дочка (должен скрываться) </div> </li> Необходимо скрывать-показывать пункты списка li при клике на чекбокс с классом parent у одного из родителей. Причем пункты списка должны скрываться(показываться) только те, которые находятся сразу после измененного чекбокса и в которых есть блок с классом children. Прошу помощи у знатоков. |
Янковиц,
строка 15 и 22 ??? Цитата:
|
Строка 10 и 15, должны скрываться, а 22 - остается
|
Янковиц,
чем строка 22 отличается от строк 10 и 15? |
рони,
ID разные, их и указывать |
Цитата:
|
Цитата:
id="customize-control-445" id="customize-control-23" |
j0hnik,
это у вас юмор такой? |
рони,
нет, какие еще варианты при такой верстке???? |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <li id="customize-control-12" class="customize-control"> <div class="parent"> <div class="onoffswitch"> <input type="checkbox" id="switch" name="switch" class="onoffswitch-checkbox" value=""> <label class="onoffswitch-label" for="switch"></label> </div> <span class="customize-control-title onoffswitch_label">Родитель</span> </div> </li> <li id="customize-control-2" class="customize-control"> <div class="children"> Дочка (должен скрываться) </div> </li> <li id="customize-control-445" class="customize-control"> <div class="children"> Дочка (должен скрываться) </div> </li> <li id="customize-control-23" class="customize-control"> <div class="children"> Не должен скрываться </div> </li> <li id="customize-control-435" class="customize-control"> <div class="checkbox_switch parent"> <div class="onoffswitch"> <input type="checkbox" id="switch" name="switch" class="onoffswitch-checkbox" value=""> <label class="onoffswitch-label" for="switch"></label> </div> <span class="customize-control-title onoffswitch_label">Родитель</span> </div> </li> <li id="customize-control-426" class="customize-control"> <div class="children"> Дочка (должен скрываться) </div> </li> <script> document.querySelectorAll('input').forEach((el,i)=>el.onchange = function(){ if(i == 0) document.querySelectorAll('#customize-control-2, #customize-control-445').forEach(li=>li.style.display = this.checked?'none':'list-item'); if(i == 1) document.querySelector('#customize-control-426').style.display = this.checked?'none':'list-item'; }); </script> </body> </html> |
другой вариант по номеру li в коллекции
|
Цитата:
|
работал с тем что есть :write:
|
Прошу прощения, в разметке с одним классом напутал. Li скрывается, если внутри него есть блок с классом children.
|
Янковиц,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $(".parent").each(function(i, parent) { $("input.onoffswitch-checkbox", parent).change(function() { $(parent).parent().nextUntil("li:has(.parent)").filter(":has(.children)").toggle(this.checked) }).change() }) }); </script> </head> <body> <ul> <li id="customize-control-12" class="customize-control"> <div class="parent"> <div class="onoffswitch"> <input type="checkbox" id="switch" name="switch" class="onoffswitch-checkbox" value=""> <label class="onoffswitch-label" for="switch"></label> </div> <span class="customize-control-title onoffswitch_label">Родитель</span> </div> </li> <li id="customize-control-2" class="customize-control"> <div class="children"> Дочка (должен скрываться) </div> </li> <li id="customize-control-445" class="customize-control"> <div class="children"> Дочка (должен скрываться) </div> </li> <li id="customize-control-23" class="customize-control"> <div class="some-class"> Не должен скрываться </div> </li> <li id="customize-control-435" class="customize-control"> <div class="checkbox_switch parent"> <div class="onoffswitch"> <input type="checkbox" id="switch" name="switch" class="onoffswitch-checkbox" value=""> <label class="onoffswitch-label" for="switch"></label> </div> <span class="customize-control-title onoffswitch_label">Родитель</span> </div> </li> <li id="customize-control-426" class="customize-control"> <div class="children"> Дочка (должен скрываться) </div> </li> </ul> </body> </html> |
Строка 10 и 15 скрываются, так как внутри них есть классы children. Причём вскрытие показ находятся в прямой зависимости от чекбокса, лежащем в ближайшем предыдущим блоке с классом parent.
То же самое, 39 строка в зависимости только от состояния чекбокса 33 строки, и наличия класса parent в 31. Прошу прощения за сумбур |
Благодарю !:dance: :thanks:
|
А возможно, чтобы вначале были скрыты, и при активной чекбоксе показывать дочерние?
|
Янковиц,
смотрите пост №15 снова. |
Часовой пояс GMT +3, время: 10:34. |