时间戳

首页 > 解决方案 > Javascript 不适用于图标

javascript - Javascript 不适用于图标

问题描述

这是我的代码

function addGlobalEventListener(type, selector, callback) {
  document.addEventListener(type, function(e) {
    if (e.target.matches(selector)) callback(e);
  });
}


addGlobalEventListener('click', '.js-accordation', function(e) {
  let panel = e.target.nextElementSibling;
  e.target.classList.toggle('js-accordation_is-active');
  if (panel.style.maxHeight) {
    panel.style.maxHeight = null
  } else panel.style.maxHeight = panel.scrollHeight + 'px';
});
<div class="js-accordation">ACCORDATION
  <i class="icon icon_arrow-down"></i>
</div>

当我单击ACCORDATION时，它正在工作，但是当我单击图标时，它不起作用

标签： javascripthtml

解决方案

我认为您的事件侦听器仅在单击带有的类时触发js-accordation。

您可以在您的中添加更多选择器addGlobalEventListener并添加i标签：

addGlobalEventListener('click',['.js-accordation', '.js-accordation i'],function(e){}


function addGlobalEventListener (type, selector, callback){ document.addEventListener(type,function(e){
  if(e.target.matches(selector)) callback(e);
 });
}


addGlobalEventListener('click',['.js-accordation', '.js-accordation i'],function(e){
 console.log('accordation');
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div  class="js-accordation">ACCORDATION
<i class="fa fa-arrow-down"></i>
</div>

推荐阅读