gpt4 book ai didi

javascript - 我的下拉菜单无法使用 Bootstrap

转载 作者:行者123 更新时间:2023-11-28 15:37:54 24 4
gpt4 key购买 nike

我创建了一个下拉菜单,该下拉菜单将由搜索栏中的按钮触发,并且在搜索栏下方将部署下拉内容。虽然我的代码不会工作

<div class="col-8">
<div class="input-group mb-3">
<div class="input-group-prepend" id="button-addon3">
<div class="dropdown">
<button class="btn btn-outline-secondary " type="button" style="color:black;background-color: darkcyan">Search</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<button class="btn btn-outline-secondary" type="button" style="color:black;background-color: darkcyan" onCLick="myFunction()">Filter</button>
</div>
<input type="text" class="form-control" placeholder="Search Reports Here" aria-label="Example text with two button addons" aria-describedby="button-addon3">
</div>
</div>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

最佳答案

您好,如果您使用的是 bootstrap,您可以使用 bootstrap 下拉菜单本身,请使用下面的代码,无需在此编写脚本。 :)

<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
<button class="btn btn-outline-secondary" type="button">Filter</button>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

关于javascript - 我的下拉菜单无法使用 Bootstrap ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59853923/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com