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
我怎样才能解决这个问题?
最合适的回答,由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