嘿，我来帮你搞定这个头疼的问题！你遇到的下拉菜单消失的情况，根源在于<a>标签的默认行为——当你点击它时，浏览器会尝试执行导航动作（哪怕href是#），这个动作会干扰Bootstrap下拉组件的正常状态，导致菜单看起来像是彻底消失了。

快速修复方案 #

最简单的办法就是阻止<a>标签的默认导航行为，有两种方式可以实现：

方式1：在onclick中返回false

直接修改你的<a>标签，在调用函数后加上return false;：

<a href="#" onclick="lafonction(); return false;">Changer le texte</a>

方式2：在函数内部阻止事件默认行为

修改你的JavaScript函数，接收事件参数并调用preventDefault()：

function lafonction(e) {
  e.preventDefault(); // 阻止<a>的默认导航动作
  document.getElementById('valeur').innerHTML = 'Nouveau texte';
}

然后对应的<a>标签要传递事件对象：

<a href="#" onclick="lafonction(event);">Changer le texte</a>

更优雅的最佳实践 #

如果你想更符合现代前端开发的规范，推荐用jQuery绑定事件（毕竟你已经引入了jQuery），避免内联onclick：

<!-- 修改<a>标签，去掉内联事件，加上ID -->
<a href="#" id="change-text-btn">Changer le texte</a>

然后在脚本里绑定点击事件：

$(document).ready(function() {
  $('#change-text-btn').click(function(e) {
    e.preventDefault();
    $('#valeur').text('Nouveau texte'); // 用text()比innerHTML更安全，适合纯文本场景
  });
});

验证修改后的完整代码 #

这里给你一个可以直接运行的完整版本，确保一切正常：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span id="valeur">Texte</span>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <a href="#" onclick="lafonction(); return false;">Changer le texte</a>
    </li>
  </ul>
</div>
<script>
function lafonction() {
  document.getElementById('valeur').innerHTML = 'Nouveau texte';
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

这样修改后，点击下拉菜单项时，文本会正常更新，下拉菜单也不会再莫名其妙消失啦！

内容的提问来源于stack exchange，提问作者Pierre-Clément