如何使用按鈕在我的網站上移動折疊的元素？
[英]How can I move collapsed elements across my website with the button?
問題描述
我正在 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>
1 個解決方案
解決方案1
1 已采納 2020-08-24 23:00:52
使用樣式表將更易於管理代碼。 如圖所示。
要將“Zelda 播放列表”移動到按鈕正下方，您只需要一個封裝按鈕和播放列表的包裝器。
之后，將定位 css 從按鈕遷移到包裝器（任何元素的位置默認為塊，這意味着如果按鈕在包裝器中的播放列表上方，則按鈕和播放列表默認垂直對齊）。
設置為 right:5% 而不是 left: 95%，這允許包裝項目默認右對齊。
將按鈕設置為浮動右側和 margin-left:100% 以確保它位於右側。
將折疊 div 設置為 100% 以確保整個折疊的 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>
如何在我網站的所有不同頁面上運行JavaScript函數？
[英]How can I run a JavaScript function across all of my website different pages?
當我在日歷網站中轉到明年的 1 月時，如何將年份更改為 2023 年？
[英]How can I change the year to 2023 as I move on to next year's January in my calendar website?
如何在我的網站中將此按鈕重定向到網站上的另一個頁面？
[英]How can I make this button in my website redirect to another page on the website?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.