我收集了大量來自瀕危語言的諺語，我想為每個諺語使用一個模態框，以提供不同的轉錄，而不會使頁面混亂。我創建了一個 div 元素，當使用 CSS :target 選擇器單擊時，該元素會展開以顯示可選資訊，并且我希望能夠為每個諺語一遍又一遍地使用該代碼，而無需創建唯一的類或 ID對于每一個諺語。問題是單擊串列中間的諺語只會展開第一個 div 框。有沒有一種方法可以為每個單擊的諺語打開 div 框，而無需為每個諺語創建唯一的可擴展 div（我有數百個）？
這是我使用的代碼：
#modalBox {
display: block;
position: relative;
text-align: left;
overflow: hidden;
background: #ffffff;
transition: all 0.4s;
padding: 5px;
margin-bottom: 2rem;
height: 2.5rem;
width: 100%;
max-width: 800px;
}
#modalBox:target {
height: 13.5rem;
}<div class="proverbs">
<div id="modalBox">
<a href="#modalBox"> A (g)att? mbrè?arol? fac? i (g)attarièdd? c?cat?.</a>
<p id="data"><b>IPA:</b> a at?? m?b??????ol? fat?? i ?at?a?i??d?? t??? kat?</p>
<p id="data"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
<p id="data"><b>English:</b> The hasty cat makes blind kittens.</p>
</p>
<a href="#" class="modalclose">×</a>
</div>
</div>uj5u.com熱心網友回復：
有幾種CSS優先方法可以產生這種效果（大部分或完全不用 javascript）。
但有一種方法甚至幾乎不依賴CSS：它是一種HTML優先的解決方案。
這details / summary對元素是呈現此類資訊的完美語意標記。
作業示例：
.modalBox {
display: block;
position: relative;
width: min(98%, 800px);
padding: 5px;
overflow: hidden;
}
.modalBox summary {
font-style: italic;
cursor: pointer;
}
.modalBox p {
transform: translateY(30vh);
transition: transform 0.3s linear;
}
.modalBox[open] p {
transform: translateY(0);
}<div class="proverbs">
<details class="modalBox">
<summary> A (g)att? mbrè?arol? fac? i (g)attarièdd? c?cat?.</summary>
<p data-lang="ipa"><b>IPA:</b> a at?? m?b??????ol? fat?? i ?at?a?i??d?? t??? kat?</p>
<p data-lang="it"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
<p data-lang="en"><b>English:</b> The hasty cat makes blind kittens.</p>
</details>
<details class="modalBox">
<summary> A (g)att? mbrè?arol? fac? i (g)attarièdd? c?cat?.</summary>
<p data-lang="ipa"><b>IPA:</b> a at?? m?b??????ol? fat?? i ?at?a?i??d?? t??? kat?</p>
<p data-lang="it"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
<p data-lang="en"><b>English:</b> The hasty cat makes blind kittens.</p>
</details>
<details class="modalBox">
<summary> A (g)att? mbrè?arol? fac? i (g)attarièdd? c?cat?.</summary>
<p data-lang="ipa"><b>IPA:</b> a at?? m?b??????ol? fat?? i ?at?a?i??d?? t??? kat?</p>
<p data-lang="it"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
<p data-lang="en"><b>English:</b> The hasty cat makes blind kittens.</p>
</details>
</div>延伸閱讀：
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
- https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/
uj5u.com熱心網友回復：
我不確定在沒有JavaScript的情況下你怎么能干凈地做到這一點。這是一個普通的實作，可以幫助您入門。id我們可以使用一個名稱來代替精確的 s，而不是定位精確的 s，class并讓解釋器找出哪個id是被點擊的。
JavaScript 貫穿 HTML，動態添加遞增id的 s（例如 、modalBox0等modalBox1）和打開每個模態的相應鏈接（例如href='#modalBox0'、href='#modalBox1'等）。
const modals = Array.from(document.querySelectorAll('.modalBox'))
modals.forEach((modal, index) => {
const id = `modalBox${index}`;
modal.id = id
const link = modal.querySelectorAll('a')[0];
link.setAttribute('href', `#${id}`)
}).modalBox {
display: block;
position: relative;
text-align: left;
overflow: hidden;
background: #ffffff;
transition: all 0.4s;
padding: 5px;
margin-bottom: 2rem;
height: 2.5rem;
width: 100%;
max-width: 800px;
}
.modalBox:target {
height: 13.5rem;
}<div class="proverbs">
<div class="modalBox">
<a href="#"> A (g)att? mbrè?arol? fac? i (g)attarièdd? c?cat?.</a>
<p id="data"><b>IPA:</b> a at?? m?b??????ol? fat?? i ?at?a?i??d?? t??? kat?</p>
<p id="data"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
<p id="data"><b>English:</b> The hasty cat makes blind kittens.</p>
<a href="#" class="modalclose">×</a>
</div>
<div class="modalBox">
<a href="#"> A (g)att? mbrè?arol? fac? i (g)attarièdd? c?cat?.</a>
<p id="data"><b>IPA:</b> a at?? m?b??????ol? fat?? i ?at?a?i??d?? t??? kat?</p>
<p id="data"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
<p id="data"><b>English:</b> The hasty cat makes blind kittens.</p>
<a href="#" class="modalclose">×</a>
</div>
</div>jsFiddle
uj5u.com熱心網友回復：
擁有 100 多個諺語，您將需要 JavaScript。此示例采用物件陣列并在用戶單擊#next或時插入內容#back <button>。您唯一需要更改的是資料：
const proverbs = [
{
main: `A (g)att? mbrè?arol? fac? i (g)attarièdd? c?cat?.`,
ipa: `a at?? m?b??????ol? fat?? i ?at?a?i??d?? t??? kat?`,
it: `La gatta frettolosa fa i gattini ciechi.`,
en: `The hasty cat makes blind kittens.`
},...
];
/*
Structure is [{main: 'first line', ipa: 'line of ipa', it: 'line of Italian',
en: 'line of English'}, {second proverb}, {third proverb},...]
*/
雖然它使用#id是因為HTMLFormElement介面使用#id、[name]或索引參考——我使用它#id是因為 CSS 選擇器更容易撰寫。只有一個模式可以處理無限數量的這 4 行諺語，所以#id應該不是問題，如果它們是你可以使用[name]屬性來代替。
細節在例子中注釋
// Reference <form>
const UI = document.forms.UI;
// Array of proverbs and translations
const proverbs = [
{main: `A (g)att? mbrè?arol? fac? i (g)attarièdd? c?cat?.`,
ipa: `a at?? m?b??????ol? fat?? i ?at?a?i??d?? t??? kat?`,
it: `La gatta frettolosa fa i gattini ciechi.`,
en: `The hasty cat makes blind kittens.`},
{main: `010101010101010101010101010101010101010101`, ipa: `02`, it: `03`, en: `04`},
{main: `1111111111111111111111111111111111111111111111111`, ipa: `12`, it: `13`, en: `14`},
{main: `2121212121212121212121212121212121212121212121`, ipa: `22`, it: `23`, en: `24`},
{main: `3131313131313131313131313131313131313131313131`, ipa: `32`, it: `33`, en: `34`},
{main: `4141414141414141414141414141414141414141414141`, ipa: `42`, it: `43`, en: `44`},
{main: `5151515151515151515151515151515151515151515151`, ipa: `52`, it: `53`, en: `54`}
];
// Define counter
let count = 0;
// Bind <form> to the click event
UI.onclick = clickHandler;
// Event handler passes Event Object by default
function clickHandler(e) {
// Reference <dialog>
const modal = document.querySelector('.proverbs');
// Reference what the user clicked
const clk = e.target;
// reference all <button>s and the <fieldset>
const IO = this.elements;
// If the user clicked #open, open <dialog>
if (clk.matches('#open')) {
clk.style.display = 'none';
modal.showModal();
}
// If the user clicked #close, close <dialog>
if (clk.matches('#close')) {
IO.open.style.display = 'inline-flex';
modal.close();
}
/*
If the user clicked #next...
...increment count...
...if count is more than the total length of proverbs array...
...make count 0 (loop over to the start)...
...call move() pass count and IO
*/
if (clk.matches('#next')) {
count;
if (count > (proverbs.length-1)) count = 0;
move(count, IO);
}
// For the sake of brevity - it's the opposite of #next
if (clk.matches('#back')) {
--count;
if (count < 0) count = proverbs.length -1;
move(count, IO);
}
}
// Pass in the counter and form control reference (IO)
function move(i, fc) {
// Reference <ul>
const list = document.querySelector('.list');
// htmlString of <legend> with new content
const main = `<legend>${proverbs[i].main}</legend>`;
// htmlstring of the new content of <ul>
const items = `
<li><b>IPA: </b>${proverbs[i].ipa}</li>
<li><b>Italian: </b>${proverbs[i].it}</li>
<li><b>English: </b>${proverbs[i].en}</li>`;
// Remove the old <legend> and <li>
fc.content.firstElementChild.remove();
list.replaceChildren();
// Insert the htmlStrings
fc.content.insertAdjacentHTML('afterbegin', main);
list.insertAdjacentHTML('beforeend', items);
}@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Raleway:wght@500&display=swap');
html {
font: 500 2ch/1.2 'Oswald'
}
dialog {
position: relative;
padding-top: 25px;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px,
rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
#content {
border-radius: 4px;
}
legend {
font-family: 'Raleway';
font-weight: 900;
margin-bottom: -8px;
}
#close {
position: absolute;
right: 4px;
top: 4px;
height: 1rem;
font-size: 1.2rem;
}
ul {
margin-left: 0px;
}
li {
margin-bottom: 8px;
}
button {
display: inline-flex;
align-items: center;
border: 2px outset rgb(227, 227, 227);
border-radius: 4px;
font: inherit;
font-variant: small-caps;
cursor: pointer;
}
.btn {
float: right;
}
#back {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
#next {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}<form id='UI'>
<button id='open' type='button'>Open</button>
<dialog class="proverbs">
<button id="close" type='button'>×</button>
<fieldset id='content'>
<legend>A (g)att? mbrè?arol? fac? i (g)attarièdd? c?cat?.</legend>
<ul class='list'>
<li><b>IPA: </b>a at?? m?b??????ol? fat?? i ?at?a?i??d?? t??? kat?</li>
<li><b>Italian: </b>La gatta frettolosa fa i gattini ciechi.</li>
<li><b>English: </b>The hasty cat makes blind kittens.</li>
</ul>
<button id='next' class='btn' type='button'>Next</button>
<button id='back' class='btn' type='button'>Back</button>
</fieldset>
</dialog>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496881.html
下一篇：影像不移動onclick