javascript - 单击购物袋图标时，将显示购物车中添加的元素列表

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

最佳答案

我的建议是创建一个新的，绝对定位的元素，该元素使用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

注意
您将需要添加一个条件，以便使用jade使用fadeToggle函数而不是fadeIn淡出购物车元素。

或者，最好将一个CSS类添加到购物车元素，以便您可以指定CSS转换，这可能适合您。

请参见jsFiddle（已用购物车箭头更新）

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

我希望这有帮助。