不要创建假URL(#
). 这对使用屏幕阅读器的用户来说是非常糟糕的:他们正在使用可用链接列表来浏览您的网站。这同样适用于javascript:
无论如何,链接并不是很优雅的标记。
您需要两个步骤:
在助行器启动前,用儿童标记物品替换顶级父级的标记我将使用空<a>
元素,以便轻松获取光标。在样式表中可能需要这样的内容:
.menu > .has-children {
cursor: pointer;
}
标记父项的筛选器来自
this answer. 第二个函数只检查该属性,并测试该项本身是否不是子项。
add_filter( \'wp_nav_menu_objects\', \'t5_add_has_children_to_nav_items\' );
add_filter( \'walker_nav_menu_start_el\', \'t5_unlink_parent_item\', 10, 4 );
/**
* Add aproperty \'has_children\' to menu items
*
* @wp-hook wp_nav_menu_objects
* @param array $items
* @return array
*/
function t5_add_has_children_to_nav_items( $items )
{
$parents = wp_list_pluck( $items, \'menu_item_parent\' );
$out = array ();
foreach ( $items as $item )
{
in_array( $item->ID, $parents ) && $item->has_children = TRUE;
$out[] = $item;
}
return $items;
}
/**
* Replace top parent element markup.
*
* @wp-hook walker_nav_menu_start_el
* @param string $item_output
* @param object $item
* @param int $depth
* @param object $args
* @return string
*/
function t5_unlink_parent_item( $item_output, $item, $depth, $args )
{
// not first level parent item
if ( empty ( $item->has_children ) or 0 != $item->menu_item_parent )
return $item_output;
$title = apply_filters(
\'the_title\',
$item->title,
$item->ID
);
$id = apply_filters(
\'nav_menu_item_id\',
\'menu-item-\'. $item->ID,
$item, $args
);
$id = $id ? \' id="\' . esc_attr( $id ) . \'"\' : \'\';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = \'menu-item-\' . $item->ID;
$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 ) . \'"\'
: \'\';
return "<li$id>$args->before<a class=\'menu-item has-children\'>$title</a>$args->after";
}