下拉菜单不显示 HTML , CSS

Posted 2023-02-24

【中文标题】下拉菜单不显示 HTML , CSS

【英文标题】：Dropdown is not showing HTML , CSS

【发布时间】：2021-05-03 17:31:51

【问题描述】：

我在 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>

【问题讨论】：

它对 ul 类的应用显示无

请在form.query被解析后显示完整呈现的html

感谢他们现在展示了，但现在他们会在页面刷新后立即显示在页面上，而下拉菜单不工作

我编辑了代码以显示 form.query

【参考方案1】：

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

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

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

【讨论】：

是的，我确实读过，但我在按照教程进行操作，而这家伙在文本输入字段中做到了

然后问那个人，或者重新阅读教程，我猜他们添加了一些javascript。

style=" transform: translate3d(px, 37px, 0px); position: absolute; will-change: transform; top: 0px; left: 0px; // 我从 github 得到他的代码，他有这些额外的样式，但它仍然不起作用

【参考方案2】：

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

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

和

aria-labelledby="dropdownMenuButton" in dropdown-menu

根据引导程序documentation

请参考此链接： 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>