Question

我遇到以下代码的问题：

<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();">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>

当我从下拉菜单中选择一个选项时，值会被更改，但下拉菜单会在视觉上和源代码中消失。

提前感谢您的帮助！

Answer 1

您需要在项目中链接bootstrap

有关bootstrap下拉列表的更多信息，我建议你使用这个站点（带有工作示例）： https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <!--BEGIN BOOTSTRAP-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<!--END BOOTSTRAP-->
</head>
<body>                                
  <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();">Changer le texte</a></li>
    </ul>
  </div>
</body>
</html>


<script>

function lafonction() {
   document.getElementById('valeur').innerHTML='Nouveau texte';
}

</script>

＆＃13;

点击功能后，下拉菜单消失

1 个答案: