Javascript CSS图像按钮不可点击

为什么当你点击信息框底部的箭头按钮时，什么都没有发生，但是当你点击信息框旁边的时候，幻灯片就下来了？如果直接单击幻灯片div上的箭头，则箭头可以正常工作，只是主div上的箭头不能正常工作。另外，当您单击打开/关闭滑块时，为什么会将您带到页面顶部？有人知道发生了什么事吗？任何有帮助的，干杯

函数findAncestor（el、cls）{
而（（el=el.parentElement）和&！el.classList.contains（cls））；
返回el；
}
功能开放（e）{
设li=e.target.parentNode.parentNode.parentNode；
li.classList.add（'hover'）；
}
功能关闭（e）{
常数hoverable=findAncestor（例如，目标“hover”）；
hoverable.classList.remove（'hover'）；
}
const infoBoxListItems=[].slice.call（document.querySelectorAll（'.open'）；
const closeButtons=[].slice.call（document.querySelectorAll（'.close'））；
infoBoxListItems.forEach（函数（elm）{
elm.addEventListener（“单击”，打开）；
});
关闭按钮。forEach（功能（btn）{
btn.addEventListener（“单击”，关闭）；
});
。一切都好{
文本对齐：居中；
最小高度：775px；
}
.一切：悬停{
游标：默认值；
}
#包装纸{
保证金：0自动；
}
#包装机{
宽度：100%；
}
.信息框列表{
显示：内联块；
文本对齐：居中；
}
ul，ol，li{
保证金：0；
填充：0；
列表样式位置：外部；
列表样式类型：无；
}
h1、h2、h3、h4、h5、h6、ul、li、ol、表单、字段集{
保证金：0；
填充：0；
}
*，*：之前，*：之后{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
菜单，目录{
显示：块；
列表样式类型：disc；
-之前的webkit保证金：1em；
-webkit后的页边距：1em；
-webkit保证金开始：0px；
-webkit页边距结束：0px；
-webkit填充开始：0px；
}
.hr{
边框颜色：rgba（255255,0.3）；
宽度：210px；
}
身体{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
填充：0；
保证金：0；
背景色：#fff；
颜色：#555；
最小宽度：20em；
}
.信息框李{
宽度：320px；
高度：550px；
背景：rgba（255255,0.3）；
边框：1px实心rgba（21100102,0.35）；
边界半径：4px；
保证金：0px 0px；
光标：指针；
位置：相对位置；
溢出：隐藏；
变换：比例（0.75）；
}
.ptext
{
字体系列：Verdana；
文本对齐：居中；
字体大小：24px；
颜色：#156466；
}
轮廓
{
利润率最高：10%；
左边距：1px；
宽度：85px；
高度：85px；
}
.学习
{
利润率最高：10%；
宽度：85px；
高度：85px；
}
演出
{
左边距：1px；
利润率最高：10%；
宽度：85px；
高度：85px；
}
团队
{
利润率最高：10%；
宽度：85px；
高度：85px；
}
.小图标
{
宽度：60px；
高度：60px；
}
.结束{
字体大小：25px；
位置：绝对位置；
右：0；
底部：0；
左：0；
填充物：2.35rem；
文本对齐：居中；
}
.打开{
字体大小：25px；
位置：绝对位置；
右：0；
底部：0；
左：0；
填充：1rem；
文本对齐：居中；
}
.openimg{
高度：20px；
宽度：20px；
}
.closeimg{
高度：20px；
宽度：20px；
}
.infobox列表li{
显示：内联块；
}
a{
颜色：白色；
文字装饰：无；
字体重量：较轻；
}
.信息箱李.信息箱{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
高度：550px；
宽度：320px；
}
.info box li.info box:在{
内容：''；
位置：绝对位置；
左：20%；
宽度：160%；
身高：188%；
背景色：rgb（255、255、255）；/*回退*/
背景色：rgba（255、255、255、0.2）；
排名：0；
-webkit变换：旋转（46度）；
-moz变换：旋转（46度）；
变换：旋转（30度）；
} 
.信息框li.悬停.阴影{
动画名称：windowshade；
光标：指针；
}
.信息框li.阴影，
.信息框li.悬停.阴影{
动画计时功能：立方贝塞尔（0.215,0.61,0.355,1）；
动画持续时间：1s；
动画迭代次数：1；
动画填充模式：正向；
}
第p节{
线高：1.3em；
颜色：#6d6e71；
宽度：100%；
填充：0 10px；
边缘顶部：5px；
左边距：0px；
文本对齐：左对齐；
}
p{
显示：块；
}
.信息框李.阴影{
位置：绝对位置；
宽度：320px；
高度：570px；
左：0；
排名：0；
背景色：#156466；
颜色：#fff；
显示：表格；
垂直对齐：中间对齐；
填充：20px 10px 0；
转换：translateY（-340px）；
动画名称：windowshade out；
}
.信息框li.阴影h3{
颜色：#fff；
填充：10px；
字体大小：粗体
}
.信息框li.阴影p{
颜色：#fff；
利润上限：23px；
线高：1.5em；
字体重量：较轻；
}
a节{
线高：2米；
颜色：#6d6e71；
宽度：100%；
填充：0 10px；
边缘顶端：13px；
左边距：0px；
文本对齐：左对齐；
}
a{
显示：块；
}
.信息框李.阴影a{
文本对齐：左对齐；
颜色：#fff；
线高：1.5em；
字体重量：较轻；
}
.信息框李.阴影a:悬停{
文字装饰：下划线；
}
.ie9.信息框li.hover.shade{
顶部：245px
}
.信息框li.将鼠标悬停在a上{
文本装饰：无
}
@关键帧windowshade{
0% {
转换：translateY（-550px）
}
100% {
变换：translateY（0）
}
}
@关键帧windowshade out{
0% {
变换：translateY（0）
}
100% {
转换：translateY（-550px）
}
}
.按钮滑盖{
颜色：#156466；
边框：1px实心rgba（21100102,0.35）；
边界半径：0px；
填充：18px 30px；
显示：内联块；
字体系列：Verdana；
字体大小：14px；
边缘底部：20px；
字母间距：1px；
背景色：rgba（255255,0.3）；
光标：指针；
框阴影：插入0#156466；
-webkit过渡：减少0.4s；
-moz过渡：放松0.4s；
过渡：放松0.4s；
}
.向下滑动：悬停{
颜色：白色；
边框：1px实心透明；
盒影：嵌入0 100px 0 0#156466；
}
.按钮\u滑块{
颜色：#156466；
边框：1px实心rgba（21100102,0.35）；
边界半径
function open(e) {
  let li = e.target.closest('li');
  li.classList.add('hover');
}

function close(e) {
  const hoverable = e.target.closest('li');
  hoverable.classList.remove('hover');
}