web-dev-qa-db-fra.com

Ajouter une classe à l'élément de menu de niveau supérieur si elle comporte plusieurs niveaux enfants

J'ai un menu de navigation WP et je dois ajouter une classe à tout <li> de niveau supérieur si cet élément comporte plusieurs niveaux d'éléments enfants (ce qui signifie que son sous-menu enfant comporte également un sous-menu). Comme ça:

<ul>
    <li>Parent
        <ul class="sub-menu">
            <li>Sublink1</li>
            <li>Sublink2</li>
        </ul>
    </li>
    <li>Parent</li>
    <li class="ADD-CLASS-HERE">Parent <!-- add class to this item -->
        <ul class="sub-menu">
            <li>Sublink1</li>
            <li>Sublink2</li>
            <li>Sublink3
                <ul class="sub-menu">
                    <li>Sublink1</li>
                    <li>Sublink2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Parent</li>
    <li>Parent</li>
    <li>Parent
        <ul class="sub-menu">
            <li>Sublink1</li>
            <li>Sublink2</li>
        </ul>
    </li>
</ul>

Je suppose que je dois utiliser un Walker pour y parvenir. (Je ne veux pas ajouter manuellement le cours dans les paramètres du menu WP.) élément d'ancêtre de niveau 0. Merci pour toute aide!

menuswalkersub-menu
4
LBF

Pas sûr, mais peut-être que quelque chose comme ça va marcher? Ajoutez à la functions.php. Voir explication ici .

//This function is responsible for adding "my-parent-item" class to parent menu item's
function add_menu_parent_class( $items ) {
$parents = array();
foreach ( $items as $item ) {
    //Check if the item is a parent item
    if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
        $parents[] = $item->menu_item_parent;
    }
}

foreach ( $items as $item ) {
    if ( in_array( $item->ID, $parents ) ) {
        //Add "menu-parent-item" class to parents
        $item->classes[] = 'my-parent-item';
    }
}

return $items;
}

//add_menu_parent_class to menu
add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );

Donc, si vous pouvez utiliser Jquery, vous pouvez le faire comme ceci:

$('ul li.menu-parent-item:has(ul ul)').addClass('your class');
3
Dejo Dekic