当嵌套的Bootstrap Dropdown <li>单击</li>时阻止滚动

Question

我有两个Bootstrap下拉菜单（分割按钮）。当下拉列表处于活动状态时，用户可以按下从1到5的数字，但是当他们按下其中任何一个时，用户将被重定向到页面顶部。

我理解它的正常行为（考虑到他们正在点击＆＃34;链接＆＃34;），但我想阻止此效果，因为它会影响移动体验。我尝试在我的jQuery代码中使用return false，但通过这样做，当下拉列表处于活动状态时，下拉列表中不能选择任何元素。还有其他选择吗？

HTML：

<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');
});

图像：

Answer 1

您可以尝试在锚点上一起删除“href”属性吗？

请参阅此帖子：Valid to use <a> (anchor tag) without href attribute?

Answer 2

尝试使用以下代码进行更改。单击<li>时，它会阻止滚动到顶部。

<li><a href="javascript:void(0);"> xyz </a></li>