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

我的建议是创建一个新的，绝对定位的元素，它被设置在屏幕的右侧（就在nav下），使用jQuery你可以淡入元素。

<强> HTML

>>> words1 = ["This is a longer", "sentence with", "different splits"]
>>> words2 = ["This is", "a longer sentence", "with different splits"]
>>> align(words1, words2)
['This is', 'a longer', 'sentence', 'with', 'different splits']

<强> CSS

<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>

<强>的jQuery

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;
}

请参阅jsFiddle

请注意您需要使用 fadeToggle 函数而不是 fadeIn 添加使用jquery淡出cart元素的条件

或者，它可以让您更好地将css类添加到cart元素，以便您可以分配css过渡。

请参阅jsFiddle（已更新为购物车箭头）

使用旋转45度的方形div创建购物车箭头，并通过向导航栏添加z-index放置在导航栏下方。通过添加$('.cartButton').click(function() { $('.cartButton').toggleClass('active'); $('.cart').fadeIn(); })类，它只会在单击购物车按钮时显示。

我希望这会有所帮助。

单击行李图标

1 个答案: