添加链接 注册    登录
link管理
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
威武的茴香  ·  React 性能优化(一): ...·  15 小时前    · 
绅士的杨桃  ·  js怎么修改src | PingCode智库·  昨天    · 
大方的椅子  ·  vue为什么红色按钮点不动 • ...·  2 天前    · 
爱逃课的小狗  ·  关于vue-select ...·  2 天前    · 
发怒的打火机  ·  使用vue3实现按钮点击后禁用 - CSDN文库·  2 天前    · 
心软的刺猬  ·  威海市人民政府甲午纵横北洋水师战长崎：海上亮 ...·  昨天    · 
幸福的领结  ·  〔20210208〕Oculus、Steam ...·  3 周前    · 
礼貌的海龟  ·  关于在熊本市接种新冠病毒疫苗的信息（新型コロ ...·  1 年前    · 
有爱心的毛衣  ·  长白山天池水怪究竟是什么生物？专家说是它，你 ...·  1 年前    · 
不拘小节的荒野  ·  未央宫遗址：汉文化发源地 ...·  1 年前    · 
link管理  ›  下拉菜单 - Bootstrap框架
another 下拉菜单 toggle 按钮
https://bootstrapdoc.com/docs/5.0/components/dropdowns
慷慨大方的泡面
1 月前

下拉列表是可切换的上下文覆盖，用于显示链接列表等。它们与附带的Bootstrap拉JavaScript插件进行了交互。 它们是通过单击而不是悬停来切换的； 这是 一个有意的设计决策 。

下拉列表建立在第三方库 Popper 上， 它提供动态定位和视口检测。 确保包含在Bootstrap的JavaScript之前包含 popper.min.js 或使用 bootstrap.bundle.min.js / bootstrap.bundle.js 包含Popper。 Popper不用于定位导航栏中的下拉列表，尽管不需要动态定位。

WAI ARIA 标准定义了一个实际的 role="menu" 小部件 ，但是这是特定于应用的，如菜单，其触发动作或功能。 ARIA 菜单只能包含菜单项、复选框菜单项、单选按钮菜单项、单选按钮组和子菜单。

另一方面，Bootstrap的下拉列表被设计成通用的，并且适用于各种情况和标记结构。例如，可以创建包含其他输入和表单控件（如搜索字段或登录表单）的下拉列表。因此， Bootstrap并不期望（也不会自动添加）真正的 ARIA 菜单所需的任何 role 和 aria- 属性。作者将不得不包括这些更具体的属性本身。

但是，Bootstrap确实为大多数标准的键盘菜单交互添加了内置支持，例如使用光标键在各个 .dropdown-item 元素之间移动，并使用 ESC 键关闭菜单的功能。

将下拉菜单的切换（按钮或链接）和下拉菜单包装在 .dropdown 中，或其他声明 position: relative; 的元素中。 可以从 <a> 或 <button> 元素触发下拉列表，以更好地满足您的潜在需求。 这里显示的示例在适当的地方使用语义 <ul> 元素，但是支持自定义标记。

任何一个 .btn 都可以通过一些标记更改变成下拉切换。下面是如何将它们与 <button> 元素一起使用：

Dropdown button
  • Action
  • Another action
  • Something else here 
    • <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
</div>

    以及 <a> 元素：

    Dropdown link
  • Action
  • Another action
  • Something else here 
    • <div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
</div>

    最好的部分是，您也可以使用任何按钮变体来实现这一点：

  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link 
    • <!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
</div>

    类似地，创建拆分按钮下拉列表，其标记与单个按钮下拉列表几乎相同，但添加了.dropdown-toggle-split，以便在下拉插入符号并让周围保持适当的间距。
    

    我们使用这个额外的类将插入符号两侧的水平 padding减少25%，并删除为常规按钮下拉添加的margin-left。 这些额外的更改将插入符号保持在拆分按钮的中心位置，并在主按钮旁边提供一个大小更合适的命中区域。
    
    
      
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 
    
      
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 
    
      
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 
      
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 
    
      
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 
    
      
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 

    <!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
</div>

    按钮下拉列表适用于所有大小的按钮，包括默认和拆分下拉按钮。
    
      Large button
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 
    
      
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 

    <!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
</div>
      Small button
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 
    
      
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 

    <div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
</div>

    




    

    深色下拉列表
    

    选择较暗的下拉菜单以匹配深色导航栏或自定义样式，方法是将.dropdown-menu-dark添加到现有的.dropdown-menu。不需要更改下拉项。
    
    Dropdown button
    
  • Action
    • 
    
  • Another action
    • 
    
  • Something else here
    • 
    
  • Separated link
    • 

    <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
</div>
    

    把它放在导航栏里：
    
    Navbar

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
    </div>
  </div>
</nav>
    

    在RTL中使用Bootstrap时，方向是映射的，这意味着.dropstart将出现在右侧。

    通过将.dropup添加到父元素，触发元素上方的下拉菜单。
    
      Dropup
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 

    <!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
</div>

    通过将.dropend添加到父元素，触发元素右侧的下拉菜单。
    
      Dropright
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 

    <!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
</div>
<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
</div>

    通过将.dropstart添加到父元素，触发元素左侧的下拉菜单。
    
      Dropleft
      
  • Action
    • 
      
  • Another action
    • 
      
  • Something else here
    • 
      
  • Separated link
    • 

    <!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
</div>
<!-- Split dropstart button -->
<div class="btn-group">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Toggle Dropstart</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

    历史上，下拉菜单的内容必须是链接，但v4不再是这种情况。现在，您可以选择在下拉列表中使用<button>元素，而不仅仅是<a>。
    
    Dropdown
    
    • 
    
    • 
    
    • 

    




    

    <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
</div>
    

    也可以使用.dropdown-item-text创建非交互式下拉项。您可以随意使用自定义CSS或文本工具进一步设计样式。
    
  
  • Dropdown item text
    • 
  
  • Action
    • 
  
  • Another action
    • 
  
  • Something else here
    • 

    <ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>

    Active
    

    将.active添加到下拉列表中的项以将其设置为活动样式。 要将活动状态传递给辅助技术，请使用 aria-current属性-使用当前page的页面值，或使用集合中当前项的 true。
    
  
  • Regular link
    • 
  
  • Active link
    • 
  
  • Another link
    • 

    <ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>

    将 .disabled添加到下拉列表中的项以将其样式设置为禁用。
    
  
  • Regular link
    • 
  
  • Disabled link
    • 
  
  • Another link
    • 

    <ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>

    默认情况下，下拉菜单自动定位在距父菜单顶部100%的位置，并沿父菜单的左侧。将.dropdown-menu-end 添加到 .dropdown-menu以右对齐下拉菜单。在RTL中使用Bootstrap时，方向是映射的，这意味着.dropdown-menu-end将出现在左侧。
    
抬头！ 下拉菜单的定位得益于Popper（除非它们包含在导航栏中）。

    




    

    <div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
</div>
    

    响应式对齐
    

    如果要使用响应式对齐，请通过添加data-bs-display="static"属性禁用动态定位，并使用响应式变体类。
    

    要将下拉菜单与给定断点或更大断点右对齐，请添加 .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end。
    
    Left-aligned but right aligned when large screen
    
    • 
    
    • 
    
    • 

    <div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
</div>
    

    要将下拉菜单与给定断点或更大断点左对齐，请添加.dropdown-menu-end 和 .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start。
    
    Right-aligned but left aligned when large screen
    
    • 
    
    • 
    
    • 

    <div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
</div>

    注意，您不需要向导航栏中的下拉按钮添加 data-bs-display="static" 属性，因为导航栏中没有使用Popper。

    在任何下拉菜单中添加header以标记操作的各个部分。

  • Dropdown header
  • Action
  • Another action 
    • <ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>

    用分隔符分隔相关菜单项组。
    
  
  • Action
    • 
  
  • Another action
    • 
  
  • Something else here
    • 
  
  • Separated link
    • 

    <ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>

    将任意形式的文本放置在带有文本的下拉菜单中，并使用间距工具。请注意，您可能需要其他大小调整样式来约束菜单宽度。
    
    Some example text that's free-flowing within the dropdown menu.
    And this is more example text.

    <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
    Some example text that's free-flowing within the dropdown menu.
  <p class="mb-0">
    And this is more example text.
</div>

    将表单放入下拉菜单中，或将其放入下拉菜单中，然后使用 边距或填充实用程序 为其提供所需的负空间。

    < form class = "px-4 py-3" > < div class = "mb-3" > < label for = "exampleDropdownFormEmail1" class = "form-label" > Email address </ label > < input type = "email" class = "form-control" id = "exampleDropdownFormEmail1" placeholder = "[email protected]" > </ div > < div class = "mb-3" > < label for = "exampleDropdownFormPassword1" class = "form-label" > Password </ label > < input type = "password" class = "form-control" id = "exampleDropdownFormPassword1" placeholder = "Password" > </ div > < div class = "mb-3" > < div class = "form-check" > < input type = "checkbox" class = "form-check-input" id = "dropdownCheck" > < label class = "form-check-label" for = "dropdownCheck" > Remember me </ label > </ div > </ div > < button type = "submit" class = "btn btn-primary" > Sign in </ button > </ form > < div class = "dropdown-divider" ></ div > < a class = "dropdown-item" href = "#" > New around here? Sign up </ a > < a class = "dropdown-item" href = "#" > Forgot password? </ a > </ div > 
    <form class="dropdown-menu p-4">
  <div class="mb-3">
    <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="mb-3">
    <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

    使用 data-bs-offset 或 data-bs-reference 更改下拉列表的位置。 

    <div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
  </div>
</div>

    通过数据属性或JavaScript，下拉插件通过切换父类 .dropdown-menu 上的 .show 类来切换隐藏内容（下拉菜单）。 data-bs-toggle="dropdown" 属性依赖于关闭应用程序级别的下拉菜单，因此最好始终使用它。

    在支持触摸的设备上，打开下拉列表会将空 mouseover 处理程序添加到 <body> 元素的直接子级。这一公认的丑陋的黑客行为对于解决 iOS事件委托 中的一个怪癖是必要的，否则会阻止在下拉列表之外的任何地方点击触发关闭下拉列表的代码。 关闭下拉列表后，这些额外的空 mouseover 处理程序将被删除。

    通过数据属性

    将 data-bs-toggle="dropdown" 添加到链接或按钮以切换下拉列表。 

    <div class="dropdown">
  <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
</div>

    通过JavaScrip

    通过JavaScript调用下拉列表： 

    var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)

    data-bs-toggle="dropdown" 仍然需要
    

    无论您是通过JavaScript调用下拉列表还是使用data-api，都需要在下拉列表的触发器元素上显示data-bs-toggle="dropdown" 。

    选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到 data-bs-，如data-bs-offset=""中所示。
    
      string | element
      'scrollParent'
      下拉菜单的溢出约束边界。默认情况下，它是'clippingParents'，可以接受HTMLElement引用（仅限于JavaScript）。有关更多信息，请参阅 Popper的 preventOverflow 文档。
      reference
      string | element
      'toggle'
      下拉菜单的引用元素。接受'toggle'， 'parent'， 或HTMLElement引用的值。有关更多信息，请参阅Popper的构造函数文档。
      display
      string
      'dynamic'
      默认情况下，我们使用Popper进行动态定位。使用static禁用此功能。
      popperConfig
      null | object
      要更改Bootstrap的默认Popper配置，请参阅Popper的配置。

    注意：当boundary设置为除 'scrollParent'以外的任何值时，样式position: static 将应用于 .dropdown 容器。
    

    var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
     
    推荐文章
    威武的茴香  ·  React 性能优化(一): 减少不必要的组件更新 | Learning Notes
    15 小时前
    绅士的杨桃  ·  js怎么修改src | PingCode智库
    昨天
    大方的椅子  ·  vue为什么红色按钮点不动 • Worktile社区
    2 天前
    爱逃课的小狗  ·  关于vue-select options里加按钮点击的时候无法阻止change事件 - 岁月淡忘了谁 - 博客园
    2 天前
    发怒的打火机  ·  使用vue3实现按钮点击后禁用 - CSDN文库
    2 天前
    心软的刺猬  ·  威海市人民政府甲午纵横北洋水师战长崎：海上亮剑长崎冲突
    昨天
    幸福的领结  ·  〔20210208〕Oculus、Steam、Pico最新VR游戏畅销榜- 映维网资讯
    3 周前
    礼貌的海龟  ·  关于在熊本市接种新冠病毒疫苗的信息（新型コロナウイルス感染症 ...
    1 年前
    有爱心的毛衣  ·  长白山天池水怪究竟是什么生物？专家说是它，你认同吗？_看鉴地理 ...
    1 年前
    不拘小节的荒野  ·  未央宫遗址：汉文化发源地 丝绸之路起点--财经--人民网
    1 年前
    Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
    link管理 - 链接快照平台