Javascript 单击按钮时添加到无序列表

我对JQuery还是个新手，我正在尝试制作这个餐厅点菜系统。我试着这样做，当你点击食物选择中的一个按钮时。它将食物的名称和价格添加到一个无序的列表中，这样你就可以看到你在旁边挑选的食物和价格的列表

var coll=$（“.collapsable”）；
对于（变量i=0；i”+price+””）；
});
/*拆分屏幕*/
html，正文{
身高：100%；
填充：0；
保证金：0；
}
/*选择部分*/
.选择{
宽度：70%；
身高：100%；
浮动：左；
填充：0 25px 0 25px；
背景颜色：灰色；
}
/*订单清单*/
.命令{
宽度：30%；
身高：100%；
浮动：左；
}
h1{
字体大小：50px；
字号：700；
颜色：黑色；
文本对齐：居中；
}
#开胃菜{
宽度：100%；
}
#主菜{
宽度：100%；
}
#甜点{
宽度：100%；
}
#饮料{
宽度：100%；
}
.可折叠{
背景颜色：浅灰色；
边界半径：5px；
边框：2件纯黑；
保证金：5px；
颜色：黑色；
光标：指针；
填充：18px；
宽度：100%；
文本对齐：居中；
大纲：无；
字体大小：30px；
}
.内容{
填充：0；
显示：无；
溢出：隐藏；
背景色：白色；
}
.食物{
保证金：自动；
宽度：100%；
高度：55px；
字体大小：20px；
}
ulli{
列表样式：无；
}

命令
选择
开胃菜
翅膀
鱿鱼
奶酪酱
主菜
翅膀
翅膀
翅膀
甜点
翅膀
翅膀
翅膀
饮料
翅膀
翅膀
翅膀
订单：



我编辑了您的代码，现在工作正常，但是
1-ID不是您可以使用的数字-用于价格等信息
2-Jquery有一个简短的命令，如果您编写Jquery而不是纯javascript，则可以使用该命令
比如你写的这个

for (var i = 0; i < coll.length; i++) {

  coll[i].addEventListener("click", function() {

    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

  $(".collapsible").click(function(){

    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });

$(".button.table")


3-在Jquery中，选择器非常重要
这是你写的

for (var i = 0; i < coll.length; i++) {

  coll[i].addEventListener("click", function() {

    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

  $(".collapsible").click(function(){

    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });

$(".button.table")


您没有
按钮
类，也没有该选择器返回的表类

$（“.collapsable”）。单击（函数（）{
this.classList.toggle（“活动”）；
var content=this.nextElementSibling；
如果（content.style.display==“块”）{
content.style.display=“无”；
}否则{
content.style.display=“block”；
}
});
$（“button.food”）。单击（函数（）{
var价格=$（此）.attr（“数据价格”）；
var name=$（this.attr（“name”）；
美元（“.orders”）。追加（“
”+name+”：“+price+”
”）；
});
/*拆分屏幕*/
html，正文{
身高：100%；
填充：0；
保证金：0；
}
/*选择部分*/
.选择{
宽度：70%；
身高：100%；
浮动：左；
填充：0 25px 0 25px；
背景颜色：灰色；
}
/*订单清单*/
.命令{
宽度：30%；
身高：100%；
浮动：左；
}
h1{
字体大小：50px；
字号：700；
颜色：黑色；
文本对齐：居中；
}
#开胃菜{
宽度：100%；
}
#主菜{
宽度：100%；
}
#甜点{
宽度：100%；
}
#饮料{
宽度：100%；
}
.可折叠{
背景颜色：浅灰色；
边界半径：5px；
边框：2件纯黑；
保证金：5px；
颜色：黑色；
光标：指针；
填充：18px；
宽度：100%；
文本对齐：居中；
大纲：无；
字体大小：30px；
}
.内容{
填充：0；
显示：无；
溢出：隐藏；
背景色：白色；
}
.食物{
保证金：自动；
宽度：100%；
高度：55px；
字体大小：20px；
}
ulli{
列表样式：无；
}

命令
选择
开胃菜
翅膀
鱿鱼
奶酪酱
主菜
翅膀
翅膀
翅膀
甜点
翅膀
翅膀
翅膀
饮料
翅膀
翅膀
翅膀
订单：