Question

<!DOCTYPE html>
<html>
<head>
  <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.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

   <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Object Type <span class="caret"></span></a>
          <ul class="dropdown-menu">
        <li><a href="#">Cloth</a></li>
        <li><a href="#">Toy</a></li>
        <li><a href="#">Furniture</a></li>
        <li><a href="#">Gift</a></li>
        <li><a href="#">Household</a></li>
        <li><a href="#">Instrument</a></li>
          </ul>
        </li>
  </div>
</div>

<script>
$(function(){

    $(".dropdown-menu li a").click(function(){

      $(".dropdown:first-child").text($(this).text());
      $(".dropdown:first-child").val($(this).text());

   });

});
</script>

</body>
</html>

当我从下拉菜单中选择值时，下拉标题会被菜单更改（例如，布料，玩具，家具等）。但是，之后下拉菜单就消失了。为什么呢？

Answer 1

因为此行$(".dropdown:first-child").text($(this).text());表示您要将整个.dropdown菜单的内容更改为所单击元素的文本，请更改选择器以选择正确的元素{{1喜欢：

.dropdown-toggle

$(function() {

  $(".dropdown-menu li a").click(function() {
    $(".dropdown-toggle").text($(this).text());
  });

});

Answer 2

首先，<li>（或<ul>）之外的<ol>无效。 li是一个列表元素，它不应该存在于列表之外。

然后，$(".dropdown:first-child")选择具有.dropdown类的第一个元素（而不是第一个元素INSIDE）。这就是你孤独的<li>元素。并且用一些文本替换该元素中的所有，因此它会消失。请改为选择$(".dropdown-toggle")。

最后，您可以通过以下方式优化代码并加速它：

缓存$（“。dropdown-toggle”）而不是在DOM中访问它并在每次单击时构建jQuery对象
使用e.currentTarget.innerText代替使用$(this).text()每次点击构建另一个jQuery对象

这会将您的代码缩减为高效的单行代码。

const $dropdownToggle = $(".dropdown-toggle")

$(".dropdown-menu li a").click(e => $dropdownToggle.text(e.currentTarget.innerText))

<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Object Type <span class="caret"></span>
</a>
  <ul class="dropdown-menu">
    <li><a href="#">Cloth</a></li>
    <li><a href="#">Toy</a></li>
    <li><a href="#">Furniture</a></li>
    <li><a href="#">Gift</a></li>
    <li><a href="#">Household</a></li>
    <li><a href="#">Instrument</a></li>
  </ul>
</div>

仅通过点击一次更改下拉值为什么？

2 个答案: