javascript - 是否有下拉菜单作为组件?网上找不到
问题描述
我正在尝试制作一个网站,可以下载讲道的 pdf 和 mp3 文件,但我无法做到这一点,因为我找不到制作下拉菜单的方法。
我尝试在引导程序、W3schools 等上查找它,但无济于事。
<script>
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');
}
}
}
}
</script>
<li>
<ul>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Lesson </button>
<div id="myDropdown" class="dropdown-content">
<a href="#" download>Lesson PDF</a>
<a href="#" download>MP3 File</a>
</div>
</div>
</ul>
<ul>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Lesson </button>
<div id="myDropdown" class="dropdown-content">
<a href="#" download>Lesson PDF</a>
<a href="#" download>MP3 File</a>
</div>
</div>
</ul>
<ul>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Lesson 3</button>
<div id="myDropdown" class="dropdown-content">
<a href="#" download>Lesson PDF</a>
<a href="#" download>MP3 File</a>
</div>
</div>
</ul>
<ul>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Lesson 4</button>
<div id="myDropdown" class="dropdown-content">
<a href="#" download>Lesson PDF</a>
<a href="#" download>MP3 File</a>
</div>
</div>
</ul>
<ul>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Lesson 5</button>
<div id="myDropdown" class="dropdown-content">
<a href="#" download>Lesson PDF</a>
<a href="#" download>MP3 File</a>
</div>
</div>
</ul>
<ul>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Lesson 6</button>
<div id="myDropdown" class="dropdown-content">
<a href="#" download>Lesson PDF</a>
<a href="#" download>MP3 File</a>
</div>
</div>
</ul>
</li>
这是我能做的最好的,但对我来说还不够好。
解决方案
推荐阅读
- authentication - 如何使用烧瓶从推送器中获取 socket_id?
- python - 将 url 列表写入单元格,然后写入 pd.to_excel。URL 列表变成一个 url。如何避免这种情况?
- ios - iPad - 有没有办法有条件地保持本机键盘关闭?
- regex - 有没有办法使用正则表达式多次匹配花括号中的特定模式?
- javascript - 输入清除时输入值复位
- laravel - 如何使用 Laravel Query Builder 仅在一个连接表中进行区分?
- wordpress - Wordpress:您可以在 add_image_size() 上设置宽度条件吗
- python - 有没有办法通过 PyCharm 修改 docker 内的文件?
- laravel - 上传文件数组 Laravel
- sql - 使用 Excel 公式时的 PostgreSQL 转义字符