Jquery 使父菜单可单击
有没有一种方法可以使顶级菜单项在仍显示下拉列表的情况下可单击 我正在Wordpress网站上使用bootstrap 3,使用说明如下: header.phpJquery 使父菜单可单击,jquery,html,css,wordpress,twitter-bootstrap,Jquery,Html,Css,Wordpress,Twitter Bootstrap,有没有一种方法可以使顶级菜单项在仍显示下拉列表的情况下可单击 我正在Wordpress网站上使用bootstrap 3,使用说明如下: header.php <?php wp_nav_menu( array( 'menu' => 'primary', 'theme_location' => 'primary',
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse navbar-ex1-collapse menu_left',
'menu_class' => 'nav navbar-nav menu_left_middle',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
<?php
wp_nav_menu( array(
'menu' => 'submenu',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse navbar-ex1-collapse menu_right',
'menu_class' => 'nav navbar-nav menu_right_middle',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</nav>
谢谢Sure–对于每个顶级锚,请确保定义href并删除数据切换属性。例如,而不是:
<a title="Design" href="#" data-toggle="dropdown" class="dropdown-toggle">Design <span class="caret"></span></a>
使用:
(或任何你想要的href)。对我来说,它是这样工作的:
我想你利用了
用编辑器打开wp-bootstrap-navwalker.php,查找第83行
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = '#';
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
将此代码更改为:
// 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';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
注意:$att['href']现在已启用,$atts['data-toggle']已禁用,这使父链接可单击
现在打开你的style.css并添加这段代码来激活WordPress菜单的悬停功能,该菜单带有下拉菜单和可点击的父菜单
.dropdown:hover .dropdown-menu {
display: block;
}
注:
在具有小屏幕的小型设备上,菜单的行为将略有变化。
不需要额外的jQuery。您可以使用jQuery将类“disabled”添加到该元素中。 见下例:
<script>
jQuery(document).ready(function() {
jQuery('ul li > a.dropdown-toggle').addClass('disabled');
});
</script>
jQuery(文档).ready(函数(){
jQuery('ul li>a.dropdown-toggle').addClass('disabled');
});
你能用截图详细说明一下吗?不,这是不可能的。但是,如果您使用的是ajax请求和javascript cookie,您可能会有一些想法。我不能添加图像,但我提供了一个指向该网站的链接。右边的菜单(艺术/建筑)etcI不理解这个问题。顶层菜单是可点击的,它是一个a
元素。如果将鼠标悬停在“艺术”上,会出现一个下拉菜单,但父链接(艺术)不可点击。我希望它是可点击的。我已经为nav添加了header.php代码。我无法看到上面的内容来编辑它。php没有这样做。打开开发工具并检查要单击的元素。它周围有一个锚定标记,href值为“#”。锚定标记的“默认操作”被阻止,但是b/c它应用了数据切换=“下拉”属性。您必须删除该数据属性。如果您不能直接在代码中执行此操作,并且无法通过php对其进行修改(情况似乎并非如此),那么作为最终手段,您可以使用JS/jQuery以$为目标('a.dropdown-toggle[data toggle=“dropdown”]”)是否可以接受我自己的答案?如果是这样,请告诉我怎么做!谢谢。帮助了很多Hanks很多,这是令人敬畏的这是伟大的,它在iphone上工作,但在android上不工作?出现下拉菜单,但可单击的项目链接将立即开始加载
<script>
jQuery(document).ready(function() {
jQuery('ul li > a.dropdown-toggle').addClass('disabled');
});
</script>