2

我在 {{form.query}} 上有 attr data-toggle= 下拉菜单，这是搜索输入

但它只是不会显示，任何解决方案？

head 部分中的 bootstrap/jquery 链接：

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

正文中的 JavaScript：

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

HTML 代码：

<form class="dropdown" method="get">
       <input type="text" name="query" class="form-control" placeholder="Type Here" data-toggle="dropdown" required id="id_query">
    
       <ul class="dropdown-menu col-12 pl-2" role="menu" aria-labelledby="menu" id="list" style="display:inline-block;">
          <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Django</a></li>
           <div class="dropdown-divider"></div>
           <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Potato</a></li>
           <div class="dropdown-divider"></div>
           <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Sleep</a></li>
       </ul> 
    
   <input type="submit" value="Search" class="btn btn-lg btn-primary col-12 my-2">                    
</form>
4

2 回答 2

1

你能检查下面的代码链接吗？希望它对你有用。你必须添加

id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"在input

和

aria-labelledby="dropdownMenuButton"在dropdown-menu

根据引导文档

请参考此链接： https ://jsfiddle.net/yudizsolutions/8fnw0o46/11/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<form class="dropdown" method="get">
  <input type="text" name="query" class="form-control" placeholder="Type Here" data-toggle="dropdown" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" required id="id_query">

  <ul class="dropdown-menu col-12 pl-2" role="menu" aria-labelledby="dropdownMenuButton" id="list">
    <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Django</a></li>
    <div class="dropdown-divider"></div>
    <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Potato</a></li>
    <div class="dropdown-divider"></div>
    <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Sleep</a></li>
  </ul>

  <input type="submit" value="Search" class="btn btn-lg btn-primary col-12 my-2">
</form>

于 2021-01-30T14:20:02.843 回答
0

您必须使用链接或按钮来切换下拉菜单，而不是文本输入。

将下拉菜单的切换（您的按钮或链接）和下拉菜单包装在 .dropdown 或另一个声明位置的元素中：relative;。可以从<a>或<button>元素触发下拉菜单，以更好地满足您的潜在需求。

https://getbootstrap.com/docs/4.6/components/dropdowns/#examples

于 2021-01-29T20:16:47.850 回答