0

这就是我所说的。

<!DOCTYPE html>
<html lang="en"> 
    <head>
        <!--REQUIRED META TAGS-->
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--------------------------------------------------------------------------------------->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <title>App</title>
    </head>
        <body class="bg-ttgl">
            <div class="container">
            <form class="form-group">
                <div class="search-row row justify-content-center">
                    <!--dropdown section-->
                    <div class="col-7 input-group-prepend">
                      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Watching</button>
                      <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item">Completed</a>
                        <a class="dropdown-item">On-Hold</a>
                        <a class="dropdown-item">Dropped</a>
                        <a class="dropdown-item">Plan to Watch</a>
                      </div>
                    <!--search field section-->
                    <input type="text" class="form-control" aria-label="Anime list username" label="Anime list username" autocorrect="off" autocapitalize="off" placeholder="MyAnimeList username">
                    <div class="input-group-append" id="button-addon4">
                    <button class="btn btn-light btn-outline-secondary" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                    </div>
                    </div>
                </div>
            </form>
            </div>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>$(".dropdown-menu a").click(function () {           
        $("button").text($(this).text());
      });
    </script>
        </body>
</html>

我还有另一个问题，在上面的 .gif 中你可以看到下拉菜单改变大小，我如何使下拉菜单不改变大小，如图所示

这个gif在这里

4

1 回答 1

1

通过这样做 $("button.").text($(this).text());，您实际上是在更改屏幕上每个按钮的文本。要仅更改切换按钮的文本，请将其更改为 $("button.dropdown-toggle").text($(this).text());

至于宽度，切换按钮正在改变大小，因为没有定义最小宽度。使用此 CSS 执行此操作

button.dropdown-toggle {
    min-width: 10rem; // This is same as the min-width of dropdown-menu
}


    button.dropdown-toggle {
        min-width: 10rem; // This is same as the min-width of dropdown-menu
    }
<!DOCTYPE html>
<html lang="en"> 
    <head>
        <!--REQUIRED META TAGS-->
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--------------------------------------------------------------------------------------->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <title>App</title>
    </head>
        <body class="bg-ttgl">
            <div class="container">
            <form class="form-group">
                <div class="search-row row justify-content-center">
                    <!--dropdown section-->
                    <div class="col-7 input-group-prepend">
                      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Watching</button>
                      <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item">Completed</a>
                        <a class="dropdown-item">On-Hold</a>
                        <a class="dropdown-item">Dropped</a>
                        <a class="dropdown-item">Plan to Watch</a>
                      </div>
                    <!--search field section-->
                    <input type="text" class="form-control" aria-label="Anime list username" label="Anime list username" autocorrect="off" autocapitalize="off" placeholder="MyAnimeList username">
                    <div class="input-group-append" id="button-addon4">
                    <button class="btn btn-light btn-outline-secondary" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                    </div>
                    </div>
                </div>
            </form>
            </div>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>$(".dropdown-menu a").click(function () {           
        $("button.dropdown-toggle").text($(this).text());
      });
    </script>
        </body>
</html>

于 2020-07-16T03:17:41.223 回答