Трудно создать аккордеон с использованием CSS или jQuery для Wordpress - PullRequest
Новая
       38

Трудно создать аккордеон с использованием CSS или jQuery для Wordpress

0 голосов
/ 03 августа 2020

Мне нужна помощь в создании аккордеонного меню. Я не могу редактировать код HTML, так как он создается через виджет и плагин. Независимо от того, какой код я использую, родительский элемент не отображает дочерний элемент и не может вставлять значки с отличным шрифтом. Я пытаюсь воссоздать что-то вроде этого: Пример CodePen Простое меню аккордеона тоже будет работать, если значки с потрясающим шрифтом недоступны. Код, с которым я работаю: 

<div class="categories_list">
<ul>
        <li class="parent_cat"><a class="" href="#">Show All</a></li>
            <li class="parent_cat"><a data-term_id="68" class="wcfm_tax_filter_toggle_parent  " href="#">ALCOPOPS &amp; PRE MIXED SPIRITS</a></li>
                <li class="child_cat wcfm_tax_filter_toggle_68"><a class="" href="#">PRE MIXED SPIRITS</a></li>
            <li class="parent_cat"><a data-term_id="69" class="filter_toggle_parent  " href="#">BABY &amp; TODDLER</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_69"><a class="" href="#">NAPPIES</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_69"><a class="" href="#">CHILDRENS MEDICINES</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_69"><a class="" href="#">BABY WIPES</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_69"><a class="" href="#">BABY TOILETRIES</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_69"><a class="" href="#">BABY FOOD &amp; MILK</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_69"><a class="" href="#">SOOTHERS, BOTTLES, STERILISERS</a></li>
            <li class="parent_cat"><a data-term_id="70" class="filter_toggle_parent  " href="#">BEER/LAGER</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_70"><a class="" href="#">LOW/NO ALCOHOL</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_70"><a class="" href="#">LAGER</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_70"><a class="" href="#">ALE &amp; STOUT</a></li>
            <li class="parent_cat"><a data-term_id="71" class="filter_toggle_parent  " href="#">BISCUITS</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_71"><a class="" href="#">SWEET BISCUITS</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_71"><a class="" href="#">CRACKERS &amp; SAVOURY BISCUITS</a></li>
            <li class="parent_cat"><a class="active" href="#">CARRIER BAGS &amp; OTHER WRAPPINGS</a></li>
            <li class="parent_cat"><a class="" href="#">CIDER</a></li>
            <li class="parent_cat"><a data-term_id="74" class="filter_toggle_parent  " href="#">CIGS CIGARS TOBACCO</a></li>
                    <li class="child_cat filter_toggle_74"><a class="" href="#">TOBACCO</a></li>
                    <li class="child_cat filter_toggle_74"><a class="" href="#">CIGARS</a></li>
                    <li class="child_cat filter_toggle_74"><a class="" href="#">CIGARETTES</a></li>
            <li class="parent_cat"><a data-term_id="75" class="filter_toggle_parent  " href="#">CONFECTIONERY</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_75"><a class="" href="#">SUGAR CONFECTIONERY</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_75"><a class="" href="#">MINTS/TIC TACs &amp; GUM</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_75"><a class="" href="#">CHOCOLATE CONFECTIONERY</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_75"><a class="" href="#">CEREAL BARS</a></li>
            <li class="parent_cat"><a data-term_id="76" class="filter_toggle_parent  " href="#">CRISPS &amp; SNACKS</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_76"><a class="" href="#">NUTS &amp; ADULT SNACKS</a></li>
                    li class="child_cat wcfm_custom_hide filter_toggle_76"><a class="" href="#">SNACKS</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_76"><a class="" href="#">POTATO CRISPS</a></li>
            <li class="parent_cat"><a data-term_id="91" class="filter_toggle_parent  " href="#">SPIRITS</a></li>
                    <li class="child_cat wcfm_custom_hide filter_toggle_91"><a class="" href="#">SCHNAPPS &amp; OTHER SPIRITS</a></li>
</ul>
    
    <script>
    jQuery(document).ready(function($) {
      $('.filter_toggle_parent').each(function() {
        $(this).off('click').on('click', function(event) {
            event.preventDefault();
            
            $term_id = $(this).data('term_id');
            $('.filter_toggle_'+$term_id).toggleClass( 'custom_hide' );
            
            return false;
        });
      });
    });
    </script>
    </div>

Да, он динамически генерирует дочерний список через js внутри кода и переключает его, чтобы отобразить его.

Вся помощь будет высоко оценена. Спасибо!

...