题目：假如我点一下特色菜 它右边出来所有特色菜的图片 价格 名称 还可以加餐和减餐的界面 然后最下面有你点的所有餐的总价格 想问问这个用Javascript怎么实现。详细代码

这个问题的实现需要结合HTML和CSS，以下是一个简单的实现方式：

HTML代码：

<div class="menu">
  <div class="menu-item" onclick="showDetails('item1')">
    <img src="item1.jpg">
    <h3>特色菜1</h3>
    <p>$10</p>
  </div>
  <div class="menu-item" onclick="showDetails('item2')">
    <img src="item2.jpg">
    <h3>特色菜2</h3>
    <p>$12</p>
  </div>
  <div class="menu-item" onclick="showDetails('item3')">
    <img src="item3.jpg">
    <h3>特色菜3</h3>
    <p>$15</p>
  </div>
</div>

<div class="details" id="item1">
  <img src="item1.jpg">
  <h3>特色菜1</h3>
  <p>$10</p>
  <div class="quantity">
    <button onclick="decrement()">-</button>
    <span id="quantity">0</span>
    <button onclick="increment()">+</button>
  </div>
  <button onclick="addToCart('item1')">加入购物车</button>
</div>

<div class="details" id="item2">
  <img src="item2.jpg">
  <h3>特色菜2</h3>
  <p>$12</p>
  <div class="quantity">
    <button onclick="decrement()">-</button>
    <span id="quantity">0</span>
    <button onclick="increment()">+</button>
  </div>
  <button onclick="addToCart('item2')">加入购物车</button>
</div>

<div class="details" id="item3">
  <img src="item3.jpg">
  <h3>特色菜3</h3>
  <p>$15</p>
  <div class="quantity">
    <button onclick="decrement()">-</button>
    <span id="quantity">0</span>
    <button onclick="increment()">+</button>
  </div>
  <button onclick="addToCart('item3')">加入购物车</button>
</div>

<div class="cart">
  <h3>购物车</h3>
  <ul id="cart-items"></ul>
  <p id="total-price">总价：$0</p>
</div>

CSS代码：

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.menu-item {
  margin: 10px;
  text-align: center;
}

.menu-item img {
  width: 200px;
}

.details {
  display: none;
  margin: 10px;
  text-align: center;
}

.details img {
  width: 300px;
}

.quantity {
  display: flex;
  justify-content: center;
  align-items: center;
}

.quantity button {
  font-size: 20px;
  margin: 0 5px;
}

.cart {
  margin: 10px;
}

.cart ul {
  list-style: none;
  padding: 0;
}

.cart li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.cart li button {
  font-size: 16px;
  margin-left: 10px;
}

JavaScript代码：

var cart = []; // 购物车数组，存放已选菜品
var totalPrice = 0; // 总价

// 显示菜品详情
function showDetails(id) {
  // 隐藏所有菜品详情
  var details = document.getElementsByClassName("details");
  for (var i = 0; i < details.length; i++) {
    details[i].style.display = "none";
  }
  // 显示当前菜品详情
  document.getElementById(id).style.display = "block";
}

// 增加数量
function increment() {
  var quantity = document.getElementById("quantity");
  var currentQuantity = parseInt(quantity.innerHTML);
  quantity.innerHTML = currentQuantity + 1;
}

// 减少数量
function decrement() {
  var quantity = document.getElementById("quantity");
  var currentQuantity = parseInt(quantity.innerHTML);
  if (currentQuantity > 0) {
    quantity.innerHTML = currentQuantity - 1;
  }
}

// 加入购物车
function addToCart(id) {
  var quantity = parseInt(document.getElementById("quantity").innerHTML);
  if (quantity > 0) {
    // 添加到购物车数组
    var item = {
      id: id,
      name: document.getElementById(id).getElementsByTagName("h3")[0].innerHTML,
      price: parseFloat(document.getElementById(id).getElementsByTagName("p")[0].innerHTML.slice(1)),
      quantity: quantity
    };
    cart.push(item);
    // 更新总价
    totalPrice += item.price * item.quantity;
    document.getElementById("total-price").innerHTML = "总价：$" + totalPrice.toFixed(2);
    // 更新购物车列表
    var cartItems = document.getElementById("cart-items");
    var existingItem = null;
    for (var i = 0; i < cartItems.children.length; i++) {
      if (cartItems.children[i].getAttribute("data-id") === id) {
        existingItem = cartItems.children[i];
        break;
      }
    }
    if (existingItem) {
      // 如果已经存在这个菜品，则更新数量
      existingItem.getElementsByTagName("span")[0].innerHTML = parseInt(existingItem.getElementsByTagName("span")[0].innerHTML) + quantity;
    } else {
      // 如果不存在这个菜品，则添加一个新的列表项
      var li = document.createElement("li");
      li.setAttribute("data-id", id);
      li.innerHTML = item.name + " x<span>" + item.quantity + "</span> $" + (item.price * item.quantity).toFixed(2) + "<button onclick='removeFromCart(this)'>删除</button>";
      cartItems.appendChild(li);
    }
    // 清空数量
    document.getElementById("quantity").innerHTML = "0";
    // 隐藏菜品详情
    document.getElementById(id).style.display = "none";
  } else {
    alert("请选择数量！");
  }
}

// 从购物车中删除
function removeFromCart(button) {
  var li = button.parentNode;
  var id = li.getAttribute("data-id");
  var quantity = parseInt(li.getElementsByTagName("span")[0].innerHTML);
  // 更新购物车数组和总价
  for (var i = 0; i < cart.length; i++) {
    if (cart[i].id === id) {
      cart.splice(i, 1);
      totalPrice -= cart[i].price * quantity;
      break;
    }
  }
  // 更新购物车列表和总价显示
  li.parentNode.removeChild(li);
  document.getElementById("total-price").innerHTML = "总价：$" + totalPrice.toFixed(2);
}

以上代码实现了一个简单的点餐系统，用户可以点击菜品图片查看菜品详情并选择数量，然后加入购物车。购物车列表显示已选菜品和总价，并且用户可以从购物车中删除某个菜品