Javascript 提交和取消按钮不工作，弹出窗口将导致可折叠面板关闭。我们如何解决这个问题？

尝试在“提交”和“取消”按钮上测试函数，但似乎没有调用这些函数。 当我按下“提交”或“取消”按钮时，它们会导致窗体关闭，模式面板也会关闭。我试图使这些按钮只关闭窗体，同时保持模式面板打开

$（文档）.ready（函数（）{
变量项=“”
$（'.show'）。单击（函数（）{
item=$（this.attr（'href'）。replace（'#'，''）//获取值
var目标=项目+zxc
if（document.getElementById（item）.className=='panel collapse'）{
document.getElementById（target.style.display='grid'；
}else if（document.getElementById（item）.className=='panel collapse in'）{
document.getElementById（target.style.display='none'；
}
});
$（'.ricedish'）。单击（函数（）{
target=$（this.attr（'id'）+'zxc'//获取目标id
//警报（目标）；
document.getElementById（target.style.display=“flex”；
});
$（'#btncancel'）。单击（函数（）{
canceltarget=$（this）.parentNode（）.attr（'id'）//获取父节点
警报（取消目标）
});
});
/*用于表单*/
{
框大小：边框框；
}
/*用于打开联系人表单的按钮-固定在页面底部*/
.打开按钮{
背景色：#555；
颜色：白色；
填充：16px 20px；
边界：无；
光标：指针；
不透明度：0.8；
位置：固定；
底部：23px；
右：28px；
宽度：280px；
}
/*弹出窗体-默认情况下隐藏*/
.表格弹出窗口{
显示：无；
位置：相对位置；
底部：0；
前-100%；
z指数：9；
}
/*将样式添加到表单容器*/
.表格容器{
高度：自动；
宽度：100%；
填充：10px；
背景色：白色；
边框：3倍纯红；
}
/*设置提交/登录按钮的样式*/
.formcontainer.btn{
背景色：#4CAF50；
颜色：白色；
填充：16px 20px；
边界：无；
光标：指针；
宽度：100%；
边缘底部：10px；
不透明度：0.8；
}
/*向“取消”按钮添加红色背景色*/
.表格容器.取消{
背景色：红色；
}
/*向按钮添加一些悬停效果*/
.form container.btn:悬停，
.打开按钮：悬停{
不透明度：1；
}


菜单项
鸡肉饭
3美元
鸡饭$3.00
选择鸡肉的类型：

烤的

蒸的

鸡排

额外浇头（每件0.50美元）

鸡蛋

更多的鸡肉


备注：





提交
取消
我无法正确运行您的代码，但您的主要问题是将javascript和jquery混为一谈。在jquery中，我们没有parentNode（）函数。相反，我们有parent（）。始终查看控制台以了解javascript错误

$('#btncancel').click(function(){
   canceltarget = $(this).parent("form").attr('id') //get parent node
   alert(canceltarget)
}); 

有jQuery时请使用它

像这样的


$（函数（）{
$（'.show'）。在（“单击”，函数（）上）{
var panelID=$（this.attr（'href'）；//获取目标
变量$panel=$（panelID）；
var$target=$（panelID+'zxc'）；
$target.css（{“display”：$panel.is（“.in”）？'grid'：'none'}）；
$panel.toggleClass（“in”）
});
$（'.ricedish'）。打开（“单击”，函数（）{
$（$（this.attr（'id'）+'zxc'）//获取目标id
.css（{“display”：“flex”}）；
});
$（'#btncancel'）。在（“单击”，函数（）上）{
canceltarget=$（this）.closest（“.panel body”）.hide（）；
});
});
/*用于表单*/
{
框大小：边框框；
}
/*用于打开联系人表单的按钮-固定在页面底部*/
.打开按钮{
背景色：#555；
颜色：白色；
填充：16px 20px；
边界：无；
光标：指针；
不透明度：0.8；
位置：固定；
底部：23px；
右：28px；
宽度：280px；
}
/*弹出窗体-默认情况下隐藏*/
.表格弹出窗口{
显示：无；
位置：相对位置；
底部：0；
前-100%；
z指数：9；
}
/*将样式添加到表单容器*/
.表格容器{
高度：自动；
宽度：100%；
填充：10px；
背景色：白色；
边框：3倍纯红；
}
/*设置提交/登录按钮的样式*/
.formcontainer.btn{
背景色：#4CAF50；
颜色：白色；
填充：16px 20px；
边界：无；
光标：指针；
宽度：100%；
边缘底部：10px；
不透明度：0.8；
}
/*向“取消”按钮添加红色背景色*/
.表格容器.取消{
背景色：红色；
}
/*向按钮添加一些悬停效果*/
.form container.btn:悬停，
.打开按钮：悬停{
不透明度：1；
}


菜单项
鸡肉饭
3美元
鸡饭$3.00
选择鸡肉的类型：

烤的

蒸的

鸡排

额外浇头（每件0.50美元）

鸡蛋

更多的鸡肉


备注：





提交
取消