web-dev-qa-db-fra.com

Supprimer la classe en cours des éléments de sous-menu

Je construis un site web wordpress avec un menu déroulant (sous-menu).

enter image description here

Pour cela, j'utilise wordpresswalkerclass. C’est le code que j’utilise dans mon functions.php

class CSS_Menu_Maker_Walker extends Walker {

  var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul>\n";
  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul>\n";
  }

  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $class_names = $value = ''; 
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    /* Add active class */
    if(in_array('current-menu-item', $classes)) {
      $classes[] = 'current';
      unset($classes['current-menu-item']);
    }

    /* Check for children */
    $children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
    if (!empty($children)) {
      $classes[] = 'has-children';
    }

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '<li' . $id . $value . $class_names .'>';

    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }

  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= "</li>\n";
  }
}

Pour essayer de démontrer ce que j'essaie d'accomplir, veuillez regarder le code HTML suivant:

  <nav id="nav-wrap"> 

        <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
           <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>

        <div class="row">                       

                <ul id="nav" class="nav">
                    <li class="current"><a href="index.html">Home</a></li>
                    <li class="has-children"><a href="#">Dropdown</a>
                      <ul>
                         <li><a href="#">Submenu 01</a></li>
                         <li><a href="#">Submenu 02</a></li>
                         <li><a href="#">Submenu 03</a></li>
                      </ul>
                   </li>
                   <li><a href="demo.html">Demo</a></li>    
                   <li><a href="archives.html">Archives</a></li>
                    <li class="has-children"><a href="single.html">Blog</a>
                            <ul>
                         <li><a href="blog.html">Blog Entries</a></li>
                         <li><a href="single.html">Single Blog</a></li>                      
                      </ul>
                    </li>               
                    <li><a href="page.html">Page</a></li>
                </ul> <!-- end #nav -->              

        </div> 

       </nav> <!-- end #nav-wrap -->

Explication:

  1. Il existe une balise de navigation principale avec une classe appelée: "nav-wrap"
  2. À l'intérieur, une simple balise div avec une classe appelée: "row"
  3. A l'intérieur, juste un simple (ul li un) où ul tag d'une classe et id "nav"
  4. Drop Down entouré d'une div avec une classe appelée: "has-children"
  5. Lorsqu'un utilisateur clique sur un élément, la classe "courante" est appelée
  6. La classe "current" n'est pas appelée lorsqu'un utilisateur clique sur un sous-élément. En, cette classe de cas "current" est appliquée sur son parent. par exemple, ici, lorsqu'un utilisateur clique sur "Entrées de blog", la classe "actuelle" est appliquée sur son parent, à savoir "Blog".

enter image description here

Mais ce que je reçois réellement, c'est:

<nav id="nav-wrap"> 

        <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
           <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>

                <div class="row"><ul id="nav" class="nav"><li id="menu-item-557" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home current"><a href="http://127.0.0.1/wordpress/">Home</a></li>
<li id="menu-item-558" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://127.0.0.1/wordpress/about-us/">About Us</a></li>
<li id="menu-item-559" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-children"><a href="http://127.0.0.1/wordpress/blog/">Blog</a>
<ul>
    <li id="menu-item-564" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://127.0.0.1/wordpress/blog/category/blogger/">Blogger</a></li>
    <li id="menu-item-565" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://127.0.0.1/wordpress/blog/category/html-css/">HTML-CSS</a></li>
    <li id="menu-item-566" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://127.0.0.1/wordpress/blog/category/psd/">PSD</a></li>
</ul>
</li>
<li id="menu-item-560" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://127.0.0.1/wordpress/contact-us/">Contact</a></li>
</ul></div> 

       </nav> <!-- end #nav-wrap -->

C’est le code que j’utilise pour sortir mon menu dans header.php

<nav id="nav-wrap"> 

        <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
           <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>

                <?php wp_nav_menu(array(
                      'menu' => 'Main Navigation', 
                      'menu_class'      => 'nav',
                      'menu_id'         => 'nav',
                      'container_class' => 'row', 
                      'walker' => new CSS_Menu_Maker_Walker()
                )); ?> 

       </nav> <!-- end #nav-wrap -->

enter image description here

Mais le problème, c’est qu’il applique également la classe "actuelle" lorsque je clique sur un sous-élément que je ne souhaite pas. Alors, que dois-je faire pour supprimer la classe "courante" dans un élément de sous-menu et l'appliquer à sa classe parente.

Ceci est le template que je convertis en wp.

menuswalker
1
Raunak Hajela

Utilisez le code suivant comme jQuery:

jQuery('#nav li').removeClass('current');
jQuery('#nav>li.current-menu-item').addClass('current');
jQuery('.has-children li.current-menu-item').closest('.has-children').addClass('current');

Voir jsfiddle (couleur rouge de l’article actuel). Lorsque vous cliquez sur l'élément de menu "Single Blog", votre structure html ressemblera à l'exemple suivant et jQuery supprimera la classe active de celle-ci et ajoutera à la classe son parent exactement comme vous le vouliez. https://jsfiddle.net/dom8188s/

1
webHasan

@raunak comment utiliser jQuery jQuery(" ul li .menu-item").removeClass( "current" ); pour ajouter à jQuery(".current-menu-parent").addClass( "current" ); parent

0
ucon89