Javascript JS-Click事件无法正常工作

也许你们中的一些人可以帮我解决这个问题。 我有这个代码，我做了一个产品的扩展，当点击产品时会显示产品描述。但是单击功能不起作用（无法关闭描述）。 谢谢

$（'.product'）。在（'click'，function（）上{
$（'.product.productExtension'）.css（“显示”、“无”）；
$（this.children（“.productExtension”）.css（“display”、“block”）；
});
函数关闭（）{
$（'.productExtension'）.css（“显示”、“无”）；
}

.product{
位置：相对位置；
宽度：80px；高度：160px；
填充：20px；
边框：实心1px灰色；
文本对齐：居中；字体系列：Arial；
}
.product>.productExtension{
位置：固定；
顶部：50%；左侧：50%；变换：平移（-50%，-50%）；
宽度：300px；高度：200px；
填充：20px；
背景：红色；
文本对齐：左对齐；
显示：无；
}
.product>.productExtension>.closeProductExtension{
位置：绝对位置；
顶部：-40px；左侧：0；
宽度：20px；高度：20px；
利润率：10px；
边界：无；
背景：无；
}

红色连帽衫
14.72$
这件连帽衫是红色的
接近

发生这种情况是因为两个函数都会触发。第一个触发器是因为您正在单击DIV“product”中的项目，第二个触发器是因为您已将函数传递给onClick。您应该从“product”中去掉“productExtension”div以使其工作。

如其他注释所述，您在父级和子级中有两个单击处理程序。父div正在拦截所有单击事件。按照你的要求试试这个

$（.product”）。在（“单击”上，函数（e）{
$（.product.productExtension”）.css（“显示”、“无”）；
$（本）
.children（“.productExtension”）
.css（“显示”、“块”）；
if（e.target.classList.contains（'closeProductExtension'））{
$（“.productExtension”）.css（“显示”、“无”）；
}
});您有几个问题。首先，您也会触发打开事件。要解决此问题，可以使用停止传播。第二个问题是，您使用的方法名“close”已经在JS中使用


$（'.product'）。在（'click'，function（）上{
$（'.product.productExtension'）.css（“显示”、“无”）；
$（this.children（“.productExtension”）.css（“display”、“block”）；
});
功能关闭（事件）{
event.stopPropagation（）；
$（'.productExtension'）.css（“显示”、“无”）；
}
.product{
位置：相对位置；
宽度：80px；
高度：160px；
填充：20px；
边框：实心1px灰色；
文本对齐：居中；
字体系列：Arial；
}
.product>.productExtension{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：300px；
高度：200px；
填充：20px；
背景：红色；
文本对齐：左对齐；
显示：无；
}
.product>.productExtension>.closeProductExtension{
位置：绝对位置；
顶部：-40px；
左：0；
宽度：20px；
高度：20px；
利润率：10px；
边框：1px纯黑；
背景：无；
}

红色连帽衫
14.72$
这件连帽衫是红色的
接近
现在我知道这不是问题的一部分，我对样式做了一些调整，但绝对没有必要在每次关闭时隐藏所有不同的
productExtension
类。阅读
产品
div中详细的属性，并将它们呈现给一个模型，这会轻松得多

它确实有一个过于复杂的方式来关闭模式（只是一些自由在那里工作，我很抱歉：））

目前被接受的答案都详细说明了您无法使用
close
（可能是）的原因，我只是认为，当您拥有多个产品时，它提供了一个不同的视角，即如何在您现在描述的模式和DOM之间传输数据。我认为它有它的优点


window.addEventListener（'load'，function（）{
document.querySelectorAll（'.product'）.forEach（product=>{
product.addEventListener（'click'，handleProductClicked，false）；
} );
document.querySelectorAll（“[data action]”）。forEach（action=>{
action.addEventListener（'click'，handleAction）；
} );
功能手动过滤（e）{
const owner=e.currentTarget；
const action=owner.getAttribute（'data-action'）；
const selector=owner.getAttribute（'data-target'）；
const target=document.querySelector（选择器）；
如果（操作=='hide'）{
如果（！target.classList.contains（'hidden'））{
target.classList.add（'hidden'）；
}
}
}
功能showModal（标题、内容、所有者）{
const modal=document.querySelector（“#modal”）；
if（modal.classList.contains（'hidden'））{
modal.classList.remove（'hidden'）；
}
modal.querySelector（'[data for=title]'）。innerText=title；
modal.querySelector（'[data for=content]'）。innerHTML=content；
}
函数handleProductClicked（e）{
const productContainer=e.currentTarget；
const name=productContainer.querySelector（'.productName'）.innerText；
const description=productContainer.querySelector（'.productExtension'）.innerHTML；
showModal（名称、说明、productContainer）；
}
} );
。隐藏{
显示：无；
可见性：隐藏；
}
.productExtension{
显示：无；
可见性：隐藏；
}
.莫代尔{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：300px；
高度：200px；
边框：实心#A0 1px；
盒影：5px 3px 5px#777；
背景色：#cfcfcf；
}
.modal>.title{
位置：绝对位置；
左：0px；
顶部：0px；
右：0px；
高度：20px；
字号：0.9em；
背景颜色：蓝色；
边框底部：实心#fff 1px；
}
.modal>.title>控件{
位置：绝对位置；
右：0px；
顶部：0px；
宽度：20px；
高度：18px；
背景色：#EFEF；
边框：实心#A0 1px；
文本对齐：居中；
文本转换：小大写字母；
}
康特罗先生