HTML 是一種用于設(shè)計網(wǎng)頁的標(biāo)記語言。在 HTML 中，我們使用“l(fā)i”標(biāo)記來創(chuàng)建項目列表，其中每個項目都使用“ul”或“ol”標(biāo)記包含。默認(rèn)情況下，“l(fā)i”元素是緊湊展示的，只顯示項目的名稱。然而，有時候我們需要讓特定的“l(fā)i”元素能夠展開，以便在點擊或懸浮鼠標(biāo)時，我們可以看到更多的詳細(xì)內(nèi)容。 為實現(xiàn)這樣的效果，我們需要使用 CSS 和 JavaScript 來對“l(fā)i”元素進(jìn)行設(shè)置。以下是實現(xiàn)展開“l(fā)i”元素的代碼： HTML 代碼：

<ul class="list">
<li>項目 1</li>
<li class="expandable-item">項目 2 <a href="#" class="expand-item">展開</a>
<div class="expanded-content">
<p>這是項目 2 的詳細(xì)內(nèi)容.</p>
</div>
</li>
<li>項目 3</li>
</ul>

CSS 代碼：

.list {
list-style: none;
margin: 0;
padding: 0;
}
.expanded-content {
display: none;
}
.expand-item {
display: inline-block;
}
.expandable-item:hover .expanded-content {
display: block;
}

JavaScript 代碼：

const expandBtns = document.querySelectorAll('.expand-item');
expandBtns.forEach((btn) =>{
btn.addEventListener('click', (e) =>{
e.preventDefault();
const content = e.target.parentNode.querySelector('.expanded-content');
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
});

在上面的 HTML 代碼中，我們?yōu)樾枰归_的“l(fā)i”元素增加了“expandable-item”類名，并添加了一個展開的按鈕“展開”。其中，“expanded-content”類名的 DIV 元素包含了我們需要展示的詳細(xì)內(nèi)容。 在 CSS 代碼中，我們首先默認(rèn)“expanded-content”元素是不可見的，我們只在鼠標(biāo)懸浮在“expandable-item”元素上時，才將其展示出來。同時，“expand-item”元素被設(shè)置為 inline-block 樣式，尤其是這個樣式減少了一個由于按鈕默認(rèn)樣式對齊所造成的問題。 在 JavaScript 代碼中，我們首先獲取需要展開的“l(fā)i”元素的展開按鈕，并為每個按鈕添加了一個“click”的事件監(jiān)聽器。每當(dāng)用戶點擊“展開”按鈕時，我們需要檢查“expanded-content”元素是否被展示。如果被展示，則隱藏它。否則，展示它。 總的來說，希望這篇文章能夠幫助你理解如何設(shè)置展開“l(fā)i”元素。通過這種方法，你可以為你的頁面添加特別的效果，從而吸引用戶的注意力。