HTML和CSS都很好,但是一旦我添加了Jquery,它就没有切换效果了?我怎样才能修好它?

HTML和CSS都很好,但是一旦我添加了Jquery,它就没有切换效果了?我怎样才能修好它?,html,jquery,css,Html,Jquery,Css,我只想让切换正常工作:当我点击“div”时,我希望div可以在“show description”之间切换,因为“show description”有一个高度和不透明度设置,div可以出现和消失。但目前,jquery不起作用,我无法单击div(我的光标不会从箭头变为指示可单击的指针) 我将我的代码(HTML、css和js)作为文本和图像附加在这个线程中。到目前为止,它们是三个独立的文件。我对编码是新手,希望有人能帮助我 $(“div”)。单击(“click”,function(){ $(thi

我只想让切换正常工作:当我点击“div”时,我希望div可以在“show description”之间切换,因为“show description”有一个高度和不透明度设置,div可以出现和消失。但目前,jquery不起作用,我无法单击div(我的光标不会从箭头变为指示可单击的指针)

我将我的代码(HTML、css和js)作为文本和图像附加在这个线程中。到目前为止,它们是三个独立的文件。我对编码是新手,希望有人能帮助我

$(“div”)。单击(“click”,function(){
$(this.toggleClass(“show description”);})
div{
高度:300px;
背景尺寸:封面;
位置:相对位置;
边距:10px;}
p{
颜色:rgba(255255,1);
背景:rgba(0,0,0,1);
背景:-webkit线性梯度(底部,rgba(0,0,0,1),rgba(0,0,0,4));
填充:10px;
背景:-莫兹线性梯度(底部,rgba(0,0,0,1),rgba(0,0,0,4));
填充:10px;
文本对齐:对齐;
线高:28px;
边界半径:0 0 12px 12px;
位置:绝对位置;
底部:0;
保证金:0;
高度:30px;
}
小的{
不透明度:0;
}
.显示说明p{
高度:150像素;
}
.显示小的描述{
不透明度:1;
}
.价格{
浮动:对;
}
.首先{
背景:url(“https://image.freepik.com/free-photo/flat-lay-bowls-with-powder_23-2148583721.jpg");
边界半径:0 0 12px 12px;
}
.第二{
背景:url(“https://image.freepik.com/free-photo/delicious-beef-burgers-wooden-board_23-2148290634.jpg");  
边界半径:0 0 12px 12px;
}
.最后{
背景:url(“https://image.freepik.com/free-photo/chocolate-cake-with-chocolate-sprinkles_144627-8998.jpg");
边界半径:0 0 12px 12px;}

伊莎餐厅
威尔士洋葱索科14美元
芥末塞拉利昂博洛吉甘蓝甜菜绿叶黑眼豌豆酸菜苋菜大蒜虎耳草大葱夏马齿苋芦笋扁豆

熏牛肉汤$22
三尖capicola kielbasa萨拉米胸肉鸡臀牛排鸡腿。肉糕查克·布丁·里贝耶猪肉下颚。安多维尔培根肉馅面包猪里脊火腿

水果蛋糕杏仁饼布丁德拉吉$8
棒棒糖酸棉花糖果冻胡萝卜蛋糕苹果派纸杯蛋糕。果冻熊爪冰淇淋糖果棒


您的代码运行得非常好。 要更改光标类型以便用户知道它是可单击的,您必须将
光标:指针设置为相关CSS样式。
将带有
光标:指针的代码段添加到现有代码中:

$(“div”)。在(“单击”,函数(){
$(this.toggleClass(“显示说明”);
});
div{
高度:300px;
背景尺寸:封面;
位置:相对位置;
利润率:10px;
光标:指针;
}
p{
颜色:rgba(255,255,255,1);
背景:rgba(0,0,0,1);
背景:-webkit线性梯度(底部,rgba(0,0,0,1),rgba(0,0,0,4));
填充:10px;
背景:-莫兹线性梯度(底部,rgba(0,0,0,1),rgba(0,0,0,4));
填充:10px;
文本对齐:对齐;
线高:28px;
边界半径:0 0 12px 12px;
位置:绝对位置;
底部:0;
保证金:0;
高度:30px;
}
小的{
不透明度:0;
}
.显示说明p{
高度:150像素;
}
.显示小的描述{
不透明度:1;
}
.价格{
浮动:对;
}
.首先{
背景:url(“https://image.freepik.com/free-photo/flat-lay-bowls-with-powder_23-2148583721.jpg");
边界半径:0 0 12px 12px;
}
.第二{
背景:url(“https://image.freepik.com/free-photo/delicious-beef-burgers-wooden-board_23-2148290634.jpg");
边界半径:0 0 12px 12px;
}
.最后{
背景:url(“https://image.freepik.com/free-photo/chocolate-cake-with-chocolate-sprinkles_144627-8998.jpg");
边界半径:0 0 12px 12px;
}
.分区{
光标:指针;
}

伊莎餐厅
威尔士洋葱索科14美元
芥末塞拉利昂博洛吉甘蓝甜菜绿叶黑眼豌豆酸菜苋菜大蒜虎耳草大葱夏马齿苋芦笋扁豆

熏牛肉汤$22
三尖capicola kielbasa萨拉米胸肉鸡臀牛排鸡腿。肉糕查克·布丁·里贝耶猪肉下颚。安多维尔培根肉馅面包猪里脊火腿

水果蛋糕杏仁饼布丁德拉吉$8
棒棒糖酸棉花糖果冻胡萝卜蛋糕苹果派纸杯蛋糕。果冻熊爪冰淇淋糖果棒


JQuery在这里做得过火了。您可以使用vanilla javascript执行相同或类似的操作。

欢迎使用Stack Overflow!寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码,最好是以最短的代码。请参见如何创建一个。在你的问题中显示一个预期的结果,并引用你得到的任何(确切的)错误,这也是非常有帮助的。你需要展示你自己为解决这个问题所做的任何研究。请花点时间阅读。关于如何最大限度地利用堆栈溢出,这篇文章中有几个技巧