Question

这是带有“购物车”段落的购物车图标。调整浏览器大小时，我想隐藏或删除“购物车”段落，仅显示购物车图标。我尝试了许多不同的方法，但仍然无法做到。我提出了三种方法： 1.使用css选择器。并使用媒体查询隐藏p元素。

@media only screen and (max-width: 600px) {
 body {
    background-color: lightblue;
 }
}

2。调整浏览器大小时，请使用JS删除p元素。

3。还可以使用JS添加一个新的icon元素来代替原始的icon元素。

但是我不知道它们的工作原理，请帮助我，非常感谢〜

这就是我正在研究的：）

 <p style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"><i class
  ="fa fa-shopping-cart" style="color:black;"></i> Cart</p>

Answer 1

编写媒体查询，并为p提供someClass或通过自己的方式访问它 <p>标签。

@media only screen and (max-width: 600px) {
 p.someClass {
    display:none;
 }
}

已更新 复制以下代码（<i>标签之外的<p>标签）

<p class="someClass" style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"></p><i class
  ="fa fa-shopping-cart" style="color:black;"></i> Cart

Answer 2

在Cart标记内包裹span文本，并如下添加类hidden-sm和该类的CSS。

@media only screen and (max-width: 600px) {
 body {
    background-color: lightblue;
 }
 .hidden-sm{
    display:none;
 }
}

<!--Demo Purpose-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<p style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"><i class
  ="fa fa-shopping-cart" style="color:black;"></i> <span class="hidden-sm">Cart</span></p>

Answer 3

您的p标记包含两个元素：

文字购物车
FontAwsome使用的i标签来创建包含图标的伪元素

因此，要隐藏文本并保留图标，可以使用简单的CSS

查看此示例

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
  p {
    font-size: 0 !important;/*hide the text using font-size*/
  }
  .fa.fa-shopping-cart {
    font-size: 15px; /*show the icon using font-size*/
  }
}

/* This style is used for the example */

  p {
    font-size: 0 !important;/*hide the text using font-size*/
  }
  .fa.fa-shopping-cart {
    font-size: 15px; /*show the icon using font-size*/
  }

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<p style="black:white;font-size:14px;font-family:Roboto; onclick=" myFunction() "><i class
  ="fa fa-shopping-cart " style="color:black; "></i> Cart</p>

Answer 4

有两种方法可以在调整大小的浏览器上使用js完成任务，第二种方法是通过CSS。根据我的说法，css是解决此问题的完美方法。我正在为您提供两种解决方案。

<!DOCTYPE html>
<html>
<head>
@media (max-width:991px){.cart span{display:none}}
</head>
<body>
<p class="cart"><i class="fa fa-cart"></i><span>Cart</span><p>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(window).resize(function(){
var winW = $(window).width();
if(winW <= 991){
$('.cart span').hide();
}else
{
$('.cart span').show();
}
});
</script>
</body>
</html>

调整浏览器大小时如何删除或隐藏此<p> </p>？

4 个答案: