Как заставить деток сворачиваться, если нет условия?

Question

[ART4]

Добрый день, ситуация впервые у меня, не знаю как заставить чтоб детки прятались к родителям, условия в php нету там, там что детки, что родители, имеет всё одинаковое за исключение, к деткам добавляется класс .sub_category_catalog_opt больше разницы нету, все на 1 уровне.

<div class="fcats">
	<div class="brand_category">
		<li nclass="md-checkbox" class="one_beand">
			<input type="checkbox" class="option-input checkbox" name="fb[7]"> 
			<label for="fb[7]">Bosch</label>
		</li>
	</div>
	
	<div class="brand_category">
		<div class="sub_category_catalog_opt">
			<li nclass="md-checkbox">
				<input type="checkbox" class="option-input checkbox" name="fb[3]"> 
				<label for="fb[3]">
				<span class="sub_category_catalog">Ferroli</span>
				</label>
			</li>
	</div>
</div>

Может есть какие идеи, сталкивались?

Comments

[Rustam Bainazarov]

Заклинание «Деткус своратус».

Да-да, я знаю…

Плохая шутка :(

Дополните вопрос, что значит «сворачиваться»?

[hzzzzl]

можно так же стрелочкой показать, что такое "сворачиваться" и как должно выглядеть в итоге

[ART4]

hzzzzl, Нужно чтоб при нажатие на Отца, вылазили детки

[uRoot]

деток сворачиваться

Что-то эта фраза мне покоя не даёт

[ART4]

CryNet, Субкатегории

[hzzzzl]

ART4, типа были не видны до этого, а после клика станут видны?

document.addEventListener('click', (e) => {
  if(e.target.matches('.brand_category')) {
    const detki = e.target.querySelectorAll('sub_category_catalog_opt')
    detki.forEach(d => d.classList.add('visible'))
  }
})

[ART4]

hzzzzl, Да верно, Нажал на категорию, вылезли подкатегории.

[Rustam Bainazarov]

ART4, ну скройте изначально стилями (display: none) ваш этот .sub_category_catalog_opt, а по клику на .brand_category открывайте (display: none). Вопрос со всплытием надо решить только.

Либо просто класс на родителя добавлять. Но тогда нормально скрывать не получится.

[ART4]

Рустам Байназаров, Они на одном уровне

[Rustam Bainazarov]

ART4, они не одном уровне.

[ART4]

Рустам Байназаров, они имеют основной класс
ссылка

[Rustam Bainazarov]

ART4, я знаю. Поэтому и написал про всплытие событий.

[Rustam Bainazarov]

ART4, и на сайте не вижу проблемы, кстати. Всё открывается и закрывается нормально (слева колонка с категориями).

[ART4]

Рустам Байназаров, там категории, а меня интересует бренды

[Rustam Bainazarov]

ART4, у меня вопрос.

Вот объясните мне, тупому, что и кто там у вас должен кликать, когда элемент имеет нулевые габариты?



Сделайте какой-то блок с названием группы. У вас же, блин, есть пример в лице фильтров категорий перед лицом...

[ART4]

Обновите кэш

[Rustam Bainazarov]

ART4, вы не поняли? Вот я скрыл .sub_category_catalog_opt (как и должно быть изначально). И у блока нулевые габариты:

[Rustam Bainazarov]

Добавьте блок с названием группы. Как люди вообще кликать-то будут по этому блоку, когда у него скрыты «детки»? У него же не будет вообще габаритов.

[Rustam Bainazarov]

И по клику на блок с названием группы и реализуйте механизм скрытия, раскрытия. У вас нет элемента на данный момент, на который физически возможно кликнуть.

Answer 1

[hzzzzl]

?

Comments

[ART4]

Получается вот так

<div class="papka">
	<li nclass="md-checkbox" class="one_beand">
		<input type="checkbox" class="option-input checkbox" name="fb[7]"> 
		<label for="fb[7]">Bosch</label>
	</li>
</div>

<div class="papka">
	<div class="detka">
		<li nclass="md-checkbox">
			<input type="checkbox" class="option-input checkbox" name="fb[3]"> 
			<label for="fb[3]">
				<span class="sub_category_catalog">Ferroli</span>
			</label>
		</li>
	</div>
</div>

И что то не то
ссылка
сам себя открывают детки

[ART4]

<div class="fcats">
                    {foreach $fbrands as $b}
                        <div class="papka">
                            {if $b->parent_id>0}
                            <div class="detka">
                                <li nclass="md-checkbox">
                                    <input type="checkbox" class="option-input checkbox" name="fb[{$b->id}]" {if $smarty.get.fb[$b->id]} checked{/if}> 
                                    <label for="fb[{$b->id}]">
                                        <span class="sub_category_catalog">{$b->name|escape}</span>
                                    </label>
                                </li>
                            </div>
                            {else}
                                <li nclass="md-checkbox" class="one_beand">
                                    <input type="checkbox" class="option-input checkbox" name="fb[{$b->id}]" {if $smarty.get.fb[$b->id]} checked{/if}> 
                                    <label for="fb[{$b->id}]">{$b->name|escape}</label>
                                </li>
                            {/if}
                        </div>
                    {/foreach} 
                </div>

[ART4]

У деток присвоено тоже .papka как и у родителей и они находятся на одном уровне

[hzzzzl]

ART4, а ну вот, теперь понятнее
надо переписать, чтобы "детки" были в одном контейнере с папкой, или хотя бы имели какой-нибудь общий атрибут, иначе никак ты их не выделишь из всех элементов



иначе они уже никакие не детки, а отдельные равнозначные элементы

[ART4]

hzzzzl, ну вот том то дело, бэкенд вывел так и исчез)

[ART4]

hzzzzl, Общий атрибут тоже же откуда то брать надо, как я понял