CSS3提供了非常便捷的方法來制作切換箭頭。切換箭頭大概是指一個箭頭可以向上或者向下旋轉90度的效果。

首先，我們定義一個class叫做arrow，用來對箭頭進行樣式的設置。我們需要設置箭頭的長和寬，以及顏色和邊框：

.arrow {
display: inline-block;
width: 0.7em;
height: 0.7em;
border: solid black;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
transition: transform 0.2s ease-in-out;
}

箭頭的樣式已經設置好了，現在需要一個容器來存放箭頭。我們可以使用一個span標簽，并且給它一個id，叫做arrow-container：

現在箭頭已經展現在了頁面上，但是它始終是向右上方的，我們還需要一個class來進行向下旋轉的設置。我們可以再定義一個class叫做arrow-down：

.arrow-down {
transform: rotate(135deg);
}

現在我們要在JavaScript中，對箭頭進行旋轉的切換。我們可以先檢測容器元素的class是否含有arrow-down，如果沒有，就添加上arrow-down，否則就移除arrow-down：

var arrowContainer = document.getElementById('arrow-container');
arrowContainer.addEventListener('click', function() {
if(!arrowContainer.classList.contains('arrow-down')) {
arrowContainer.classList.add('arrow-down');
} else {
arrowContainer.classList.remove('arrow-down');
}
});

現在我們已經完成了對切換箭頭的制作，快去試試吧！