单击按钮打开下拉菜单
P粉232409069
P粉232409069 2023-09-04 15:04:13
0
1
458
<p>我正在使用 bootstrap 5 cdn,我想打开下拉列表而不单击下拉列表。</p> <p>我使用导航栏并希望显示“下拉链接”:</p> <pre class="brush:php;toolbar:false;">&lt;nav class=&quot;navbar navbar-expand-sm navbar-light bg-light&quot;&gt; &lt;div class=&quot;container-fluid&quot;&gt; &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt; &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarNavDropdown&quot; aria-controls=&quot;navbarNavDropdown&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot; &gt; &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt; &lt;/button&gt; &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNavDropdown&quot;&gt; &lt;ul class=&quot;navbar-nav&quot;&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;nav-item dropdown&quot;&gt; &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; id=&quot;test&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot; &gt; Dropdown link &lt;/a&gt; &lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;navbarDropdownMenuLink&quot;&gt; &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt; &lt;button class=&quot;btn btn-primary btn-sm&quot; (click)=&quot;open()&quot;&gt;Abrir&lt;/button&gt;</pre> <p>在组件中我尝试执行以下操作,但它不起作用:</p> <pre class="brush:php;toolbar:false;">export class AppComponent { open() { const dropdown = document.getElementById('test'); dropdown.click(); } }</pre> <p>我在 stackblitz 中做到了:测试</p>
P粉232409069
P粉232409069

모든 응답(1)
P粉333186285

向按钮添加引导属性:

<button
    class="btn btn-primary btn-sm"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown"
    aria-expanded="false"
    aria-label="Toggle navigation"
 >
     Abrir
</button>

链接代码:https://stackblitz.com/edit/angular-bootstrap-5-dynamic-navbar-77sj13?file=app/app.component.html

它会起作用,但是。请记住,您的角度应用程序应该控制这些元素,因此将外部库与框架库(Angular、Vue、React)混合使用总是会引起麻烦

对于这种用途,有特殊的实现,例如: https://ng- bootstrap.github.io/#/home 角度引导

另一个选项是使用 ngIf 显示导航栏(默认情况下没有动画)

另一个链接: https://stackblitz.com/edit/angular-bootstrap-5-dynamic-navbar-hygpzq?file=app/app.component.html

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!