web-dev-qa-db-fra.com

Comment puis-je supprimer data-target = "#" du menu déroulant bootstrap?

J'ai créé un méga menu avec Wordpress. Le thème sur lequel je travaille utilise souvent bootstrap et ajoute tellement de choses étranges à mon menu, et l’une de ces choses qui semblent assez étranges est qu’il a ajouté un data-target="#" à mes éléments de menu parents, ce qui les rend inutilisables comme liens.

Cela peut marcher pour certains, mais j'essaie de rendre ces liens cliquables, car les enfants sont toujours affichés.

Voici mon script de menu:

<?php wp_nav_menu(
  array(
      'theme_location' => 'primary',
      'container_class' => 'collapse navbar-collapse navbar-responsive-collapse',
      'menu_class' => 'nav navbar-nav',
      'fallback_cb' => '',
      'menu_id' => 'main-menu',
      'walker' => new wp_bootstrap_navwalker()
  )
); ?>

Est-ce que quelqu'un sait comment supprimer cette fonctionnalité?

menustwitter-bootstrap
1
turtledropbomb

Vos options sont les suivantes:

  1. Étendre le walker et changer la sortie (surcharger la fonction start_el)

Voici un exemple de Walker, en supposant que vous utilisez ce bootstrap walker.

Usage:

  'walker' => new se150102_bootstrap_walker()

Marcheur:

class se150102_bootstrap_walker extends wp_bootstrap_navwalker  {
/**
     * This walker is identical to the parent start_el() function, except
     * it does not put href="#" for parent elements.
     *
 * @see wp_bootstrap_navwalker::start_el()
 * @since 3.0.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param object $item Menu item data object.
 * @param int $depth Depth of menu item. Used for padding.
 * @param int $current_page Menu item ID.
 * @param object $args
 */
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    /**
     * Dividers, Headers or Disabled
     * =============================
     * Determine whether the item is a Divider, Header, Disabled or regular
     * menu item. To prevent errors we use the strcasecmp() function to so a
     * comparison that is not case sensitive. The strcasecmp() function returns
     * a 0 if the strings are equal.
     */
    if ( strcasecmp( $item->attr_title, 'divider' ) == 0 && $depth === 1 ) {
        $output .= $indent . '<li role="presentation" class="divider">';
    } else if ( strcasecmp( $item->title, 'divider') == 0 && $depth === 1 ) {
        $output .= $indent . '<li role="presentation" class="divider">';
    } else if ( strcasecmp( $item->attr_title, 'dropdown-header') == 0 && $depth === 1 ) {
        $output .= $indent . '<li role="presentation" class="dropdown-header">' . esc_attr( $item->title );
    } else if ( strcasecmp($item->attr_title, 'disabled' ) == 0 ) {
        $output .= $indent . '<li role="presentation" class="disabled"><a href="#">' . esc_attr( $item->title ) . '</a>';
    } else {

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );

        if ( $args->has_children )
            $class_names .= ' dropdown';

        if ( in_array( 'current-menu-item', $classes ) )
            $class_names .= ' active';

        $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 .'>';

        $atts = array();
        $atts['title']  = ! empty( $item->title )   ? $item->title  : '';
        $atts['target'] = ! empty( $item->target )  ? $item->target : '';
        $atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';

        // If item has_children add atts to a.
        if ( $args->has_children && $depth === 0 ) {
            $atts['href']           = ! empty( $item->url ) ? $item->url : '#';
            $atts['data-toggle']    = 'dropdown';
            $atts['class']          = 'dropdown-toggle';
            $atts['aria-haspopup']  = 'true';
        } else {
            $atts['href'] = ! empty( $item->url ) ? $item->url : '';
        }

        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $item_output = $args->before;

        /*
         * Glyphicons
         * ===========
         * Since the the menu item is NOT a Divider or Header we check the see
         * if there is a value in the attr_title property. If the attr_title
         * property is NOT null we apply it as the class name for the glyphicon.
         */
        if ( ! empty( $item->attr_title ) )
            $item_output .= '<a'. $attributes .'><span class="glyphicon ' . esc_attr( $item->attr_title ) . '"></span>&nbsp;';
        else
            $item_output .= '<a'. $attributes .'>';

        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= ( $args->has_children && 0 === $depth ) ? ' <span class="caret"></span></a>' : '</a>';
        $item_output .= $args->after;

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

2. Utilisez JavaScript.

Exemple ici dans jQuery

$('#main-menu a').each(function(){
    $(this).removeAttr('data-target');
});
3
Eric Holmes