Скрытие - показ элементов по чекбоксу
Есть сложная разметка:
<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>
|
| Часовой пояс GMT +3, время: 08:20. |