javascript - 单击袋子图标时会显示购物车中添加的商品列表

Question

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about" onClick="testMy()">CART</a></li>
  
 <div>Empty cart add something</div>
</ul>

我正在开发一个购物车导航菜单，在右上角我创建了一个名为“CART”的可点击链接，所以我试图将其做成这样。当用户单击“CART”时，会出现一个 div，其中包含他已添加到 CART 中的元素列表，再次单击它将关闭。

寻找该div的javascript代码，以便div将准确地出现在购物车菜单链接下，箭头指向购物车，如我所附的图像所示。

Item list in cart with arrow

Answer 1

我的建议是创建一个新的、绝对定位的元素，使用 jQuery 将其设置在屏幕的右侧(就在导航下方)，您可以淡入该元素。

HTML

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li class="cartButton">CART</li>
</ul>

<div class="cart">
   <div>Empty cart add something</div>
</div>

CSS

ul {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

li.cartButton {
  position: absolute;
  height: 100%;
  padding: 5px 10px;
  color: #fff;
   right: 0px;
   padding-top: 10px;
}

li.cartButton.active {
  background-color: #4CAF50;
}

.active {
  a {
    background-color: #4CAF50;
  } 
}

.cart  {
  position: absolute;
  display: none;
  top: 50px;
  right: 0;
  width: 400px;
  height: 300px;
  background-color: #4CAF50;
}

jQuery

$('.cartButton').click(function() {
 $('.cartButton').toggleClass('active');
 $('.cart').fadeIn();
})

参见jsFiddle

注意 您需要使用 jquery 添加一个条件来淡出购物车元素，使用 fadeToggle 函数而不是 fadeIn .

或者，将 css 类添加到购物车元素可能更适合您，这样您就可以分配 css 过渡。

参见jsFiddle (用购物车箭头更新)

购物车箭头是通过旋转 45 度的方形 div 创建的，并通过向导航添加 z 索引将其放置在导航栏下方。通过添加 .cart 类，它只会在单击购物车按钮时显示。

我希望这会有所帮助。