Flex Pannels Image Gallery

當使用者點擊任何一張圖片的時候，此圖片就會變水平展開，可以看到比較完整的圖片全貌．
同時會出現此圖片的相關敘述

對同一張圖片去做點擊的話，會toggle判斷展開還是要縮放．當你已經展開一張圖片後，又去點擊另一張圖片時，原本展開的圖片要縮回去，目前點的要展開

就這樣不停來回地開來開去，這就是伸縮自如的愛啊～

個人codepen

技巧點

1. event.target、event.currentTarget
   假設我有一個html結構如下，這個卡片是由圖片撐起來整個空間，上面有一個絕對定位的h2標題．
   當你綁定監聽事件，整個card的時候．點擊card中的不同地方，會有不同的event.target．

<li class="card">
    <img src="https://picsum.photos/id/57/1000/1000" alt="">
     <h2>third</h2>
</li>

const card = document.querySelector(".card");

function handleClick(e) {
  console.log(e.target)
}

card.addEventListener("click", handleClick);

• 當你點擊在圖片，event.target會取得img標籤，加上預設會有js的冒泡事件，會向上傳遞點擊事件，所以你還會得到父元素的li標籤；同理，如果點擊在h2標籤身上，event.target也是會得到h2標籤外加上父層的li標籤．

function handleClick(e) {
  console.log(e.target.parentNode);
  console.log(e.currentTarget);
}

• 想取到li父元素的方法，就可以使用e.target.parentNode；或是直接使用e.currentTarget，因為綁定監聽事件的ＤＯＭ物件就是li本人．所以只要用currentTarget，每一次觸發點擊，都可以取得li物件
• 為了能夠更了解這兩者的差異，以及在冒泡事件上的影響，也特別做了codePen去觀察變化．你監聽的元素綁在內層的時候，像是上面範例的img，此時target和currentTarget就會是同一個人囉～

心得

這個小練習的寫法也可以有其他種，我是直接去操作dom元素的style樣式，去達成想要的變化．

當然也可以利用classList的方式去toggle指定好的class樣式．青菜蘿蔔各有優缺，我比較愛青菜？