如何在HTML折叠菜单的每个按钮右侧添加向下箭头

我需要在折叠菜单的每一行末尾添加如图所示的向下箭头按钮：

我已编写了以下HTML代码，但不确定如何实现该箭头效果：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

.collapsible {
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
    border-bottom: 1px solid #3b3b3b;
  text-align: center;
  outline: none;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  float: left;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}
 img {
    height:30px;
    width:auto;
  }
  h2{
   text-align: center;
   font-family: 'Roboto', sans-serif;
  }
  
  p{
   text-align: center;
   font-family: 'Roboto', sans-serif;
  }
  
</style>
</head>
<body>

<h2>BUY NOW PAY LATER</h2>

<p>MAKE YOUR SHOPPING EXPEREINCE EASIER WITH OUR BUY NOW & PAY LATER OPTIONS</p>

<button type="button" class="collapsible">USA</button>
<div class="content">
  <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/afterpay_b3c68881-b0e3-4aa1-bfd9-9432a6e7f84b.png?v=1678664225">  <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/sez_6b34600a-46d8-4dce-afbf-4ba445aadca4.jpg?v=1596434632"> 
  <p>IF YOU ARE SHIPING FROM THE USA WE OFFER SEZZLE AND AFTERPAY</p><br>
  <p>FOR MORE INFORMATION ON SEZZLE. <a href="url">CLICK HERE</a></p>
   <p>FOR MORE INFORMATION ON AFTERPAY. <a href="url">CLICK HERE</a></p>
</div>

<button type="button" class="collapsible">AUSTRALIA</button>
<div class="content">
  <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/afterpay_b3c68881-b0e3-4aa1-bfd9-9432a6e7f84b.png?v=1678664225">  <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/sez_6b34600a-46d8-4dce-afbf-4ba445aadca4.jpg?v=1596434632"> 
  <p>IF YOU ARE SHIPING FROM THE USA WE OFFER SEZZLE AND AFTERPAY</p><br>
  <p>FOR MORE INFORMATION ON SEZZLE. <a href="url">CLICK HERE</a></p>
   <p>FOR MORE INFORMATION ON AFTERPAY. <a href="url">CLICK HERE</a></p>
</div>

<button type="button" class="collapsible">UNITED KINGDOM</button>
<div class="content">
  <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/afterpay_b3c68881-b0e3-4aa1-bfd9-9432a6e7f84b.png?v=1678664225">  <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/sez_6b34600a-46d8-4dce-afbf-4ba445aadca4.jpg?v=1596434632"> 
  <p>IF YOU ARE SHIPING FROM THE USA WE OFFER SEZZLE AND AFTERPAY</p><br>
  <p>FOR MORE INFORMATION ON SEZZLE. <a href="url">CLICK HERE</a></p>
   <p>FOR MORE INFORMATION ON AFTERPAY. <a href="url">CLICK HERE</a></p>
</div>
<button type="button" class="collapsible">NEW ZEALAND</button>
<div class="content">
  <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/afterpay_b3c68881-b0e3-4aa1-bfd9-9432a6e7f84b.png?v=1678664225">  <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/sez_6b34600a-46d8-4dce-afbf-4ba445aadca4.jpg?v=1596434632"> 
  <p>IF YOU ARE SHIPING FROM THE USA WE OFFER SEZZLE AND AFTERPAY</p><br>
  <p>FOR MORE INFORMATION ON SEZZLE. <a href="url">CLICK HERE</a></p>
   <p>FOR MORE INFORMATION ON AFTERPAY. <a href="url">CLICK HERE</a></p>
</div>
<button type="button" class="collapsible">CANADA</button>
<div class="content">
  <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/afterpay_b3c68881-b0e3-4aa1-bfd9-9432a6e7f84b.png?v=1678664225">  <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/sez_6b34600a-46d8-4dce-afbf-4ba445aadca4.jpg?v=1596434632"> 
  <p>IF YOU ARE SHIPING FROM THE USA WE OFFER SEZZLE AND AFTERPAY</p><br>
  <p>FOR MORE INFORMATION ON SEZZLE. <a href="url">CLICK HERE</a></p>
   <p>FOR MORE INFORMATION ON AFTERPAY. <a href="url">CLICK HERE</a></p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

</body>
</html>

解决方案 #

方法一：使用CSS伪元素（推荐，无需修改HTML结构） #

这种方法不需要改动现有HTML，只需要修改CSS即可实现箭头效果，还能配合active状态实现箭头旋转的交互：

1. 修改.collapsible的样式，添加position: relative，让伪元素可以基于按钮定位：

.collapsible {
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border-bottom: 1px solid #3b3b3b;
  text-align: center;
  outline: none;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  /* 添加这一行 */
  position: relative;
}

2. 添加伪元素样式，生成右侧的向下箭头：

/* 生成向下箭头 */
.collapsible::after {
  content: "▼";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}

/* 当按钮展开时，箭头旋转为向上 */
.collapsible.active::after {
  content: "▲";
}

方法二：直接在HTML按钮内添加箭头元素 #

如果更倾向于直接修改HTML，可以在每个折叠按钮里添加箭头标签，再用CSS定位：

1. 修改每个按钮的HTML，添加箭头<span class="arrow">▼</span>：

<button type="button" class="collapsible">USA <span class="arrow">▼</span></button>

2. 添加对应的CSS样式：

.collapsible {
  /* 保持原有样式，添加以下两行 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow {
  font-size: 12px;
}

/* 展开时切换箭头 */
.collapsible.active .arrow {
  content: "▲";
}

两种方法的JS逻辑都不需要改动，active类会被正确添加/移除，从而实现箭头的状态切换。

内容的提问来源于stack exchange，提问作者Shopify-Developer