javascript - 如何使用按钮在我的网站上移动折叠的元素？
问题描述
我正在html中制作一种嵌套折叠功能，但想知道如何在按钮下方的“塞尔达播放列表”中移动第一张卡片。似乎没有任何效果，而且看起来超级有问题。我已经改变了位置并尝试了左侧、顶部、底部和右侧的功能，但它仍然在角落里被窃听。此外，如果有一种方法可以将两个元素一起移动，那就更好了。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<title>My Webpage</title>
</head>
<body>
<button style="position:absolute; left:90%; top:34%;" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Zelda Playlist
</button>
<div class="collapse" id="collapseExample" style="width:28%;">
<div class="card card-body">
<div class="accordion" id="accordionExample">
<div class="card" style="width:99%;">
<div class="card-header" id="headingOne" style="text-align:center">
<h2 class="mb-0">
<button class="btn btn-secondary text-center collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Dragon Roost Island - Wind Waker
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body" style="text-align:center">
<audio controls>
<source src="dragonroost.mp3">
</audio>
</div>
</div>
</div>
<div class="card" style="width:99%;">
<div class="card-header" id="headingTwo" style="text-align:center">
<h2 class="mb-0">
<button class="btn btn-secondary text-center collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Gerudo Valley - Ocarina of Time
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body" style="text-align:center">
<audio controls>
<source src="gerudo.mp3">
</audio>
</div>
</div>
</div>
<div class="card" style="width:99%;">
<div class="card-header" id="headingThree" style="text-align:center">
<h2 class="mb-0">
<button class="btn btn-secondary text-center collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Lost Woods - Ocarina of Time
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body" style="text-align:center">
<audio controls>
<source src="lostwoods.mp3">
</audio>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true">
<audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true">
<script>
var death = document.getElementById("death");
death.volume = 0.2;
</script>
</body>
</html>解决方案
使用样式表将更易于管理代码。如图所示。
要将“塞尔达播放列表”移动到按钮下方，您只需要一个封装按钮和播放列表的包装器。
之后，将定位 css 从按钮迁移到包装器（任何元素的位置默认为块，这意味着如果按钮在包装器内的播放列表上方，则按钮和播放列表默认垂直对齐）。
设置为右：5% 而不是左：95%，这允许包装项目默认右对齐。
将按钮设置为浮动右侧和 margin-left:100% 以确保它在右侧。
将collapse div设置为100%，保证整个collapsed div不收缩
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>My Webpage</title>
<style>
.collapsibleWrapper {
position:absolute; right: 5%; top:34%;
}
.collapsibleWrapper .btn-primary {
max-width: 80px;
float: right;
margin-left: 100%;
}
.collapse, .collapsing {
width: 100% !important;
}
</style>
</head>
<body>
<div class="collapsibleWrapper">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Zelda Playlist
</button>
<div class="collapse" id="collapseExample" style="width:28%;">
<div class="card card-body">
<div class="accordion" id="accordionExample">
<div class="card" style="width:99%;">
<div class="card-header" id="headingOne" style="text-align:center">
<h2 class="mb-0">
<button class="btn btn-secondary text-center collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Dragon Roost Island - Wind Waker
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body" style="text-align:center">
<audio controls>
<source src="dragonroost.mp3">
</audio>
</div>
</div>
</div>
<div class="card" style="width:99%;">
<div class="card-header" id="headingTwo" style="text-align:center">
<h2 class="mb-0">
<button class="btn btn-secondary text-center collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Gerudo Valley - Ocarina of Time
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body" style="text-align:center">
<audio controls>
<source src="gerudo.mp3">
</audio>
</div>
</div>
</div>
<div class="card" style="width:99%;">
<div class="card-header" id="headingThree" style="text-align:center">
<h2 class="mb-0">
<button class="btn btn-secondary text-center collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Lost Woods - Ocarina of Time
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body" style="text-align:center">
<audio controls>
<source src="lostwoods.mp3">
</audio>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true">
<audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true">
<script>
var death = document.getElementById("death");
death.volume = 0.2;
</script>
</audio>
</audio>
</body>
</html>推荐阅读
- github-actions - 按作业状态过滤 GitHub Actions 工作流运行
- django - Django Paypal 集成 createOrder curl
- windows - WIC 是否支持 AVIF 文件？
- gdb - TUI 在 cmd 行上工作，但不在 mintty
- python - 如何根据单个值拆分大数据帧，1130.07
- php - Docker PHP-Apache 间歇性错误
- matlab - 可以自动枚举数字或在matlab中保留令牌吗？
- python - 将一个列标题复制到 Pandas 中的另一个列标题
- python - ValueError：层顺序的输入 0 与层不兼容（神经网络）
- amazon-web-services - 我如何使用 Aws amplify 和 s3 存储私下存储项目，但允许管理员访问所有文件