Bootstrap在5.1 中，对标签行内属性进行了修改。以下案例均以 bootstrap.bundle.min.js 5.1版本为基础 ### 下拉菜单（Dropdowns） **触发按钮** ```html <a id="dropdownMenuButton" href="JavaScript:;" data-bs-toggle="dropdown">触发按钮</a> ``` 必须属性 ||| | ------------ | ------------ | |data-bs-toggle="dropdown"|触发类型：dropdown| |id="dropdownMenuButton"|触发目标 aria-labelledby：dropdownMenuButton| **触发目标** ```html <ul aria-labelledby="dropdownMenuButton" class="dropdown-menu"> </ul> ``` 必须属性 ||| | ------------ | ------------ | |aria-labelledby="dropdownMenuButton"|与触发按钮中 id 值保持一致| |class="dropdown-menu"| | **参照案例** 触发按钮 ```html <a id="Nav_Mor" href="JavaScript:;" data-bs-toggle="dropdown" class="dropdown-menu-a"><i class="YuLunFonts iconfont-gengduo3 xi3"></i></a> ``` 触发目标 ```html <ul aria-labelledby="Nav_Mor" class="dropdown-menu MenuBox"> @foreach($Navs as $Nav) <a class="xs2" href="{{ $Nav->url }}" @if ($Nav->target == '1')target="_blank" @endif>{{ $Nav->name }}</a> @endforeach </ul> ``` css ```css .MenuBox:not(.show) { opacity: 0; } .MenuBox { position: absolute; min-width: 120px; background-color: #FFF; padding: 10px 20px; margin-top: -15px; border-right: 1px solid #F0F0F0; border-left: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0; border-top: 2px solid #3796F6; border-radius: 0 0 5px 5px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1); transition: 0.4s ease; transition-property: opacity, margin; pointer-events: none; } .MenuBox a { height: 36px; line-height: 36px; display: block; } .show.dropdown-menu-a, .show.dropdown-menu-a i { color: #3796F6 !important; } .show.dropdown-menu { margin-top: 0; z-index: 1000; pointer-events: auto; } ``` 注： 1. `MenuBox:not(.show) { opacity: 0; }` 便于多次附加 opacity 的 0 与 1 。即当 .MenuBox 同级没有 .show 时。（当 存在 .show 时，该属性不触发） 2. MenuBox 在默认 Bootstrap 的下拉菜单基础上，实现了css3 的过渡效果。即 `transition: 0.4s ease; transition-property: opacity, margin`
