HTML 是一種用于創(chuàng)建網(wǎng)頁的語言，它可以幫助我們實現(xiàn)各種各樣的效果。其中，實現(xiàn)商品手風(fēng)琴效果是一個非常常見的需求。下面我們就來看看如何使用 HTML 實現(xiàn)這個效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品手風(fēng)琴效果</title>
<style>
/* 定義整個商品列表的樣式 */
#goods-list {
width: 800px;
margin: 0 auto;
}
/* 定義每個商品的樣式 */
.goods-item {
width: 200px;
height: 100px;
border: 1px solid #ccc;
float: left;
margin-right: 10px;
position: relative;
transition: all 0.3s linear;
}
.goods-item:hover {
width: 400px;
z-index: 99;
box-shadow: 0px 0px 10px #ccc;
}
/* 定義每個商品的標(biāo)題樣式 */
.goods-item h3 {
font-size: 16px;
margin: 0;
padding: 10px;
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
}
/* 定義每個商品的詳情樣式 */
.goods-item p {
font-size: 14px;
margin: 0;
padding: 10px;
display: none;
}
/* 定義每個商品的箭頭樣式 */
.arrow {
position: absolute;
top: 50%;
right: -20px;
margin-top: -10px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent transparent #ccc;
}
/* 定義每個商品展開后的樣式 */
.goods-item.active {
width: 800px;
height: auto;
box-shadow: 0px 0px 10px #ccc;
}
.goods-item.active h3 {
border-bottom: none;
}
.goods-item.active p {
display: block;
}
.goods-item.active .arrow {
right: 20px;
border-color: transparent #ccc transparent transparent;
}
</style>
</head>
<body>
<div id="goods-list">
<div class="goods-item">
<h3>商品1</h3>
<p>商品1的詳情</p>
<span class="arrow"></span>
</div>
<div class="goods-item">
<h3>商品2</h3>
<p>商品2的詳情</p>
<span class="arrow"></span>
</div>
<div class="goods-item">
<h3>商品3</h3>
<p>商品3的詳情</p>
<span class="arrow"></span>
</div>
</div>
<script>
// 給每個商品添加點擊事件
var goodsItems = document.querySelectorAll('.goods-item');
for (var i = 0, len = goodsItems.length; i < len; i++) {
goodsItems[i].addEventListener('click', function() {
// 找到當(dāng)前點擊的商品
var currentItem = this;
// 找到當(dāng)前被展開的商品
var activeItem = document.querySelector('.goods-item.active');
if (activeItem == null) {
// 如果沒有商品被展開，就直接展開當(dāng)前點擊的商品
currentItem.classList.add('active');
return;
}
if (currentItem == activeItem) {
// 如果當(dāng)前點擊的就是被展開的商品，就折疊它
activeItem.classList.remove('active');
return;
}
// 如果當(dāng)前點擊的不是被展開的商品，就先折疊被展開的，再展開當(dāng)前點擊的
activeItem.classList.remove('active');
currentItem.classList.add('active');
});
}
</script>
</body>
</html>上面的代碼中，我們首先定義了整個商品列表和每個商品的樣式，然后給每個商品添加了點擊事件。當(dāng)用戶點擊某個商品時，我們就根據(jù)當(dāng)前情況來判斷是展開它還是折疊它，并修改相應(yīng)的樣式。這樣，就實現(xiàn)了商品手風(fēng)琴效果。