soyaine/JavaScript30

关于05Gallery动画的一点小改进

Opened this issue · 1 comments

  1. 不知道有没有人和我一样,感觉点击一处后其他地方没有归位很不舒服,就改进了一下在点击时归位其他元素。
  2. 还有双击问题,还有个JS的解决方法,直接在toggle open后面toggle open-active,和原效果一致,好处是不用修改CSS
const panels = Array.from(document.querySelectorAll('.panel'));

function toggleOpen(e) {
  this.classList.toggle('open');
  this.classList.toggle('open-active');
  // get siblings
  var s = [].filter.call(this.parentNode.children, (child)=>child!==this);
  s.forEach(s=>s.classList.remove('open')) 
}


panels.forEach(panel => panel.addEventListener('click', toggleOpen));

PS:昨天在Issue里被@后才发现这里,解决了自己的一个纠结问题,真是不错,一起学习哈~

欢迎多交流!~