Skip to content

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

Description

@dxcqcv
  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里被@后才发现这里,解决了自己的一个纠结问题,真是不错,一起学习哈~

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions