Я создаю сеть с WordPress + Elementor + Essential Addons для Elementor.Я использую «Фильтруемую галерею» (вы можете увидеть демо здесь: https://essential -addons.com / elementor / filterable-gallery / ).
У меня 9 галерей7 фильтруемых элементов управления (категорий).В первой категории 3 элемента, а в остальных только 1 элемент.
Галерея имеет 3 столбца, но когда я выбираю категорию только с одним элементом, я хочу изменить класс этого элемента.item (для того, чтобы иметь ширину 100%).
Я пробовал некоторые решения, для которых элемент должен иметь класс или идентификатор, но я не мог понять, как адаптировать его к моей ситуации.
Вот код (я изменил / удалил некоторые вещи, которые я считаю не относящимися к делу):
<div class="eael-filter-gallery-control">
<ul>
<li class="control active" data-filter="*">All</li>
<li class="control " data-filter=".eael-cf-cata">CatA</li>
<li class="control " data-filter=".eael-cf-catb">CatB</li>
<li class="control " data-filter=".eael-cf-catc">CatC</li>
<li class="control " data-filter=".eael-cf-catd">CatD</li>
<li class="control " data-filter=".eael-cf-cate">CatE</li>
<li class="control " data-filter=".eael-cf-catf">CatF</li>
<li class="control " data-filter=".eael-cf-catg">CatG</li>
</ul>
</div>
<div class="eael-filter-gallery-container">
<div class="eael-filterable-gallery-item-wrap eael-cf-cata"></div>
<div class="eael-filterable-gallery-item-wrap eael-cf-cata"></div>
<div class="eael-filterable-gallery-item-wrap eael-cf-cata"></div>
<div class="eael-filterable-gallery-item-wrap eael-cf-catb"></div>
<div class="eael-filterable-gallery-item-wrap eael-cf-catc"></div>
<div class="eael-filterable-gallery-item-wrap eael-cf-catd"></div>
<div class="eael-filterable-gallery-item-wrap eael-cf-cate"></div>
<div class="eael-filterable-gallery-item-wrap eael-cf-catf"></div>
<div class="eael-filterable-gallery-item-wrap eael-cf-catg"></div>
</div>
Сначала активна категория «Все», в результате чего 9 элементовотображается в 3 столбцах и 3 строках.
Если я нажимаю «CatA», то второй li активен, и в результате первые 3 элемента отображаются в 3 столбцах.Это нормально.
Если я нажимаю «CatB», «CatC», ... «CatG», то третий, четвертый, ... последний li активен и отображается только один элемент (которыйвсе в порядке), но он отображается с шириной 33% (потому что в первом столбце 3).
Мне бы хотелось, чтобы третий, четвертый, ... последний li был активным (возможно,отфильтрованный, но data-filter), затем я могу добавить (или переключить) класс к определенному div, чтобы изменить CSS (ширина, высота ... или, возможно, поле, положение, это не проблема).
Я прошу прощения за мой английский.Если это полезно, вот временная сеть, где вы можете увидеть ее онлайн: http://webconqr.com/#galeriaaa