jquery - 使用修改后的 bootstrap walker 代码 - onClick 未将 'open' 类添加到父 LI

Question

我有一个奇怪的特定导航功能，我需要一个我被带入的网站。您可以在此处以 HTML 格式查看它的功能: http://bluetabby.com/sites/template/index.html

关于我们子元素“Out Team”上有一个向右箭头图标，然后当您缩小浏览器以查看移动菜单时 - 有向下箭头图标，您可以单击它打开子菜单，并且在所有在某些情况下，单词本身就是实时链接。

我能够使用 wp-bootstrap-navwalker.php 脚本将我的大部分菜单功能转换为 Wordpress，并修改它以允许我的父级导航项具有事件的 href 链接并在悬停在桌面上时显示子菜单.

但是，我无法让移动菜单正常工作，我尝试添加一些 javascript 以在单击字形图标周围的“a.dropdown-toggle”后向父 LI 添加一个类。

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

这是 Wordpress 版本的链接: http://www.bluetabby.com/sites/griffon/wp/

这是我的 bootstrap-walker 文件中修改后的代码:

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

/**
 * @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( "\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    : '';
            $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 .= '<a'. $attributes .'><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><span class="glyphicon glyphicon-menu-right reg"></span><span class="glyphicon glyphicon-menu-down act"></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 ) ? ' <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><span class="glyphicon glyphicon-menu-right reg"></span><span class="glyphicon glyphicon-menu-down act"></span>' : '</a>';
       $item_output .= $args->after;

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

这是输出到我的 wordpress 页面的带有下拉菜单的顶级 li 的内容:

<li id="menu-item-1207" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-1207 dropdown"><a title="ABOUT US" href="http://www.bluetabby.com/sites/griffon/wp/about-us/">ABOUT US </a><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-right reg"></span><span class="glyphicon glyphicon-menu-down act"></span>
</a><ul role="menu" class=" dropdown-menu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
</a><li id="menu-item-1208" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1208"><a href="#" class="dropdown-toggle" data-toggle="dropdown"></a><a title="HISTORY" href="http://www.bluetabby.com/sites/griffon/wp/about-us/history/">HISTORY</a>    </li>
<li id="menu-item-1334" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-21 current_page_item menu-item-1334 active"><a title="TIMELINE" href="http://www.bluetabby.com/sites/griffon/wp/about-us/historical-timeline/">TIMELINE</a></li>
<li id="menu-item-1209" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1209 dropdown"><a title="OUR TEAM" href="http://www.bluetabby.com/sites/griffon/wp/about-us/our-team/">OUR TEAM</a>
<ul role="menu" class=" dropdown-menu">
    <li id="menu-item-1210" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1210"><a title="BOARD MEMBERS" href="http://www.bluetabby.com/sites/griffon/wp/about-us/our-team/board-members/">BOARD MEMBERS</a></li>
    <li id="menu-item-1211" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1211"><a title="MANAGEMENT" href="http://www.bluetabby.com/sites/griffon/wp/about-us/our-team/management/">MANAGEMENT</a></li>
</ul>
</li>
<li id="menu-item-1212" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1212">
<a title="OUR BUSINESSES" href="http://www.bluetabby.com/sites/griffon/wp/about-us/our-businesses/">OUR BUSINESSES</a></li>
</ul>
</li>

我很确定我在这里做了一些愚蠢的事情。但我不明白为什么我添加(上面)到我的页面的一点脚本不会向我的 li.dropdown 添加一个类 - 因为这真的是我需要做的才能让它工作 - 如果我添加“打开”对于开发人员工具中的 li.dropdown，我的移动子菜单显示正确，因此我只需要找到一种方法来在单击 a.dropdown-toggle 时在 li.dropdown 上切换类...

Answer 1

我在您提供的链接上试用了这段 javascript/jQuery，效果相当不错。我没有使用 .find()，而是使用了 .next() 来处理菜单中的链接。

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

也许这会让您更接近解决方案。