Javascript 当点击行李图标时，购物车中添加的物品列表显示_Javascript_Html_Css

Javascript 当点击行李图标时，购物车中添加的物品列表显示

javascript html css

Javascript 当点击行李图标时，购物车中添加的物品列表显示,javascript,html,css,Javascript,Html,Css,ul{ 列表样式类型：无；保证金：0；填充：0；溢出：隐藏；背景色：#333； } 李{ 浮动：左； } 李阿{ 显示：块；颜色：白色；文本对齐：居中；填充：14px 16px；文字装饰：无； } li a:悬停：未（.active）{ 背景色：#111； } .主动{ 背景色：#4CAF50； } 空车加东西我的建议是使用jQuery创建一个新的绝对定位元素，该元素设置在屏幕的右侧（就在导航下方），您可以淡入该元素 HTML <ul> <li&

ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
li a:悬停：未（.active）{
背景色：#111；
}
.主动{
背景色：#4CAF50；
}






空车加东西

我的建议是使用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>

jQuery

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

看

注您需要添加一个条件，使用jquery，使用fadeToggle函数而不是fadeIn淡出cart元素

或者，它可能更适合您向cart元素添加一个css类，以便您可以分配css转换

请参阅（使用购物车箭头更新）

购物车箭头是用旋转45度的方形div创建的，通过向导航栏添加z索引将其放置在导航栏下方。通过添加

.cart

类，它将仅在单击购物车按钮时显示

我希望这会有所帮助。