自定义漫游菜单深度打开问题

时间:2018-03-22 作者:ilanb

I\'v create custom categories walker菜单:

   <?php
    /**
     * Show Categories menu
     *
     */
    $seller_id = (int) get_query_var(\'author\');
    ?>
    <aside class="cat-menu">
        <h3 class="cat-menu-title"><?php echo "Catégories"; ?></h3>
        <div id="cat-drop-stack">
        <?php

        global $wpdb;

        $sql = "SELECT t.term_id,t.name, tt.parent FROM $wpdb->terms as t
                    LEFT JOIN $wpdb->term_taxonomy as tt on t.term_id = tt.term_id
                    LEFT JOIN $wpdb->term_relationships AS tr on tt.term_taxonomy_id = tr.term_taxonomy_id
                    LEFT JOIN $wpdb->posts AS p on tr.object_id = p.ID
                    WHERE tt.taxonomy = \'product_cat\'
                    AND p.post_type = \'product\'
                    AND p.post_status = \'publish\'
                    AND p.post_author = $seller_id GROUP BY t.term_id";

        $categories = $wpdb->get_results( $sql );
        //var_dump($categories);

        $walker = new Dokan_Store_Category_Walker( $seller_id );
        echo "<ul style=\\"width:250px;height:400px;overflow: scroll;\\">";
        echo call_user_func_array( array(&$walker, \'walk\'), array($categories, 0, array()) );
        echo "</ul>";
        ?>
        </div>
    </aside>
    <script>
        ( function ( $ ) {
            $( \'#cat-drop-stack li.has-children\' ).on( \'click\', \'> a span.caret-icon\', function ( e ) {
                e.preventDefault();
                var self = $( this ),
                    liHasChildren = self.closest( \'li.has-children\' );

                if ( !liHasChildren.find( \'> ul.children\' ).is( \':visible\' ) ) {
                    self.find( \'i.fa\' ).addClass( \'fa-rotate-90\' );
                    if ( liHasChildren.find( \'> ul.children\' ).hasClass( \'level-0\' ) ) {
                        self.closest( \'a\' ).css( { \'borderBottom\': \'none\' } );
                    }
                }

                liHasChildren.find( \'> ul.children\' ).slideToggle( \'fast\', function () {
                    if ( !$( this ).is( \':visible\' ) ) {
                        self.find( \'i.fa\' ).removeClass( \'fa-rotate-90\' );

                        if ( liHasChildren.find( \'> ul.children\' ).hasClass( \'level-0\' ) ) {
                            self.closest( \'a\' ).css( { \'borderBottom\': \'1px solid #eee\' } );
                        }
                    }
                } );
            } );
        } )( jQuery );
    </script>
    <?php
以及课程:

class Dokan_Store_Category_Walker extends Dokan_Category_Walker {

    function __construct( $seller_id ) {
        $this->store_url = dokan_get_store_url ( $seller_id );
    }

    function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
        extract( $args );
        $indent = str_repeat( "\\t", $depth );

        $url = $this->store_url . \'section/\' . $category->term_id;
        $selected_cat = get_query_var( \'term\' );
        $a_selected_class = $selected_cat == $category->term_id ? \'class="selected"\' : \'\';

        if ( $depth == 0 ) {
            $caret = $args[\'has_children\'] ? \' <span class="caret-icon"><i class="fa fa-angle-right" aria-hidden="true"></i></span>\' : \'\';
            $class_name = $args[\'has_children\'] ? \' class="has-children parent-cat-wrap"\' : \' class="parent-cat-wrap"\';
            $output .= $indent . \'<li\' . $class_name . \'>\' . "\\n\\t" .\'<a href="\' . $url . \'"\'. $a_selected_class .\'>\' . $category->name . $caret . \'</a>\' . "\\n";
        } else {
            $caret = $args[\'has_children\'] ? \' <span class="caret-icon"><i class="fa fa-angle-right" aria-hidden="true"></i></span>\' : \'\';
            $class_name = $args[\'has_children\'] ? \' class="has-children"\' : \'\';
            $output .= $indent . \'<li\' . $class_name . \'><a href="\' . $url . \'"\'.$a_selected_class.\'>\' . $category->name . $caret . \'</a>\';
        }
    }
}
实际上,所有深度都已打开,例如:

cat01
 cat01_1
  cat01_1_1
 cat01_2
cat02
 cat02_1
我需要这样的菜单(不是所有子目录都打开):

cat01
 cat01_1
 cat01_2
cat02
 cat02_1
我怎样才能解决这个问题?

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

换言之,我试图找到如何在默认情况下折叠所有cat

在这种情况下,请尝试以下脚本(替换现有脚本):

<script>
    ( function ( $ ) {
        $( \'li.has-children\', \'#cat-drop-stack\' ).on( \'click\', \'> a span.caret-icon\', function ( e ) {
            e.preventDefault();
            var self = $( this ),
                submenu = self.closest( \'li.has-children\' ).find( \'> ul.children\' );

            if ( !submenu.is( \':visible\' ) ) {
                self.find( \'i.fa\' ).addClass( \'fa-rotate-90\' );
                if ( submenu.hasClass( \'level-0\' ) ) {
                    self.closest( \'a\' ).css( { \'borderBottom\': \'none\' } );
                }
            }

            submenu.slideToggle( \'fast\', function () {
                if ( !$( this ).is( \':visible\' ) ) {
                    self.find( \'i.fa\' ).removeClass( \'fa-rotate-90\' );

                    if ( submenu.hasClass( \'level-0\' ) ) {
                        self.closest( \'a\' ).css( { \'borderBottom\': \'1px solid #eee\' } );
                    }
                }
            } );
        } )
        .find( \'> ul.children\' ).hide().end()
        .filter( \'.level-0\' ).find( \'> a span.caret-icon\' ).click();
    } )( jQuery );
</script>

Demo on CodePen

结束