Using modified bootstrap walker code - onClick not adding 'open' class to parent LI

Question

I have a weirdly specific navigation functionality that I need for a site I've been brought in on. You can view it here in HTML functioning as it should: http://bluetabby.com/sites/template/index.html

There is a right-arrow icon on the About Us sub-item "Out Team" and then when you decrease the browser to view the mobile menu - there are down arrow icons that you click to open the submenus, and in all cases the words themselves are live links.

I was able to convert most of my menu functionality to Wordpress using the wp-bootstrap-navwalker.php script, and modifying it to allow my parent nav item to have an active href link and to display the submenu on hover on desktop.

I cannot, however, get the mobile menu to work, and I've tried adding in bit ofjavascript to add a class to the parent LI upon clicking the "a.dropdown-toggle" which I have around the glyphicon.

$(function() {
$("a.dropdown-toggle").on("click", function() {
    $("li.menu-item.open").removeClass("show");
    $(this).find("li.menu-item").addClass("show");
});

Here's a link to the Wordpress version: http://www.bluetabby.com/sites/griffon/wp/

This is the modified code in my bootstrap-walker file:

public function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat( "	", $depth );
    $output .= "
$indent
";
}

/**
 * @see Walker::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( "	", $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 . '';
    } else if ( strcasecmp( $item->title, 'divider') == 0 && $depth === 1 ) {
        $output .= $indent . '
';
    } else if ( strcasecmp( $item->attr_title, 'dropdown-header') == 0 && $depth === 1 ) {
        $output .= $indent . '
' . esc_attr( $item->title );
    } else if ( strcasecmp($item->attr_title, 'disabled' ) == 0 ) {
        $output .= $indent . '' . esc_attr( $item->title ) . '';
    } 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 . '';

        $atts = array();
        $atts['title']  = ! empty( $item->title )   ? $item->title  : '';
        $atts['target'] = ! empty( $item->target )  ? $item->target : '';
        $atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';
            $atts['href'] = ! empty( $item->url ) ? $item->url : '';
        // If item has_children add atts to a.
        if ( $args->has_children && $depth === 0 ) {

        } 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 .= ' ';
        else
            $item_output .= '';

        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= ( $args->has_children && 0 === $depth ) ? ' ' : '';
       $item_output .= $args->after;

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

This is what is being output to my wordpress page for a top-level li with dropdown-menu:

ABOUT US 

HISTORY    
TIMELINE
OUR TEAM

    BOARD MEMBERS
    MANAGEMENT



OUR BUSINESSES

I am pretty sure I'm doing something stupid here. But I can't understand why my bit of script I added (above) to my page won't add a class to my li.dropdown - as that's really all I need to do to get it work - if I add "open" to my li.dropdown in developer tools, my mobile submenu displays correctly, so I just need to find a way to toggle a class on li.dropdown upon click of a.dropdown-toggle...

Matt Overwine · Accepted Answer

I tried this bit of javascript/jQuery out on your provided link and this worked fairly well. Instead of using .find() I used .next() in relation to the links in your menu.

$("a.dropdown-toggle").on("click", function() {
    $("ul.dropdown-menu.show").removeClass("show");
    $(this).next( "ul.dropdown-menu" ).addClass("show");
});

Maybe that will get you closer to a solution.

Using modified bootstrap walker code - onClick not adding 'open' class to parent LI

Answers (1)

Related Questions

Using modified bootstrap walker code - onClick not adding &#39;open&#39; class to parent LI

Answers (1)

Related Questions

Using modified bootstrap walker code - onClick not adding 'open' class to parent LI