我有两个Bootstrap下拉菜单(拆分按钮)。当下拉菜单处于活动状态时,用户可以按下从1到5的数字,但当他们按下其中任何一个时,用户将被重定向到页面顶部。
我明白这是正常的行为(考虑到他们正在点击“链接”),但我想防止这种影响,因为它会影响移动的体验。我尝试在我的jQuery代码中使用return false
,但是这样做,当下拉菜单处于活动状态时,下拉菜单中没有元素可以选择。还有别的选择吗?
超文本标记语言:
<div id="btn1">
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">Add 1 vector</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu" id="ajouter">
<li><a href="#">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">5</a> </li>
</ul>
</div>
</div>
jQuery:
$('#ajouter a').on('click', function() {
nombre_ajout = parseInt($(this).html());
if (nombre_ajout > 1)
$('#btn1 button').eq(0).html('Add ' + nombre_ajout +' vectors');
else if (nombre_ajout == 1)
$('#btn1 button').eq(0).html('Add ' + nombre_ajout +' vector');
});
图片:
2条答案
按热度按时间nuypyhwy1#
你可以尝试删除所有锚的“href”属性?
看到这篇文章在此:Valid to use (anchor tag) without href attribute?
vsmadaxz2#
尝试用下面的代码更改。当点击
<li>
时,它阻止滚动到顶部。