javascript - 当我尝试隐藏 Card 样式的侧边栏时出现奇怪的行为

Question

我创建了一个边栏，在卡片式框中列出了流行的产品。但问题是当我尝试隐藏卡片时，卡片内的图像不会隐藏。为什么会发生这种奇怪的行为？你有什么解决办法吗？如果是，请同时说明。 请参阅代码段以获得更好的理解。

function toggleProduct(){ document.getElementById("popular-product").classList.toggle("hideproduct");}

#popular-product.hideproduct{
	width:0;
  -webkit-transition: width 0.35s ease-in-out;
  -moz-transition: width 0.35s ease-in-out;
  -o-transition:width 0.35s ease-in-out;
  transition:width 0.35s ease-in-out;
}
#popular-product{
	position:absolute;
	bottom:0;
	height:100%;
	width:316px;
	background-color:rgb(236, 236, 236);
	background-color:rgba(236, 236, 236, 0.31);
	padding-top:4px;
	padding-bottom:4px;
	padding-left:8px;
	padding-right:8px;
  -webkit-transition: width 0.35s ease-in-out;
  -moz-transition: width 0.35s ease-in-out;
  -o-transition:width 0.35s ease-in-out;
  transition:width 0.35s ease-in-out;
}
#popular-product .popular-product-box{
	margin:8px 0px;
	padding:2px 1px;
	height:168px;
}
#popular-product .popular-product-box:first-child{
	margin:0px;
}
#popular-product .popular-product-box .inner-content{
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	box-shadow:0px 2px 4px rgba(0,0,0,0.1);
	-webkit-box-shadow:0px 2px 4px rgba(0,0,0,0.1);
	-moz-box-shadow:0px 2px 4px rgba(0,0,0,0.1);
	background-color:#ffffff;
	height:166px;
	text-align:center;
}
.content-img{
	height:104px;
	width:86px;
}
.popular-product-box .inner-content span{
	margin-top:0px;
	font-size:16px;
}

span.off-circle{
    font-size: 13px;
    padding-top: 10px;
    color: #fff;
    border-radius: 100% 100%;
    -webkit-border-radius:100% 100%;
	-moz-border-radius:100% 100%;	
    padding-bottom: 10px;
    padding-left: 2px;
    padding-right: 2px;
    position: absolute;
    z-index: 2;
    right: 15px;
    top: 10px;
	background-color: rgb(210, 14, 14);
    background-color: rgba(210, 14, 14, 0.78);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/titatoggle/1.2.14/titatoggle-dist-min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  .checkbox-slider--b input+span:after {
				top: -7px;
			}	
</style>
<div class="col-md-12 col-sm-12" id="s-c-box">
				<div class="row text-center">
					<div class="checkbox checkbox-slider--b checkbox-slider-md">
						<label>
							<input type="checkbox" checked id="product-switch" onChange="toggleProduct();"/><span style="position:relative;">Show/Hide</span>
						</label>
					</div>	
				</div>
			</div>

<div id="popular-product">
	<div class="popular-product-box">
			<div class="inner-content">
				<span class="off-circle">70%<small>off</small></span>
				<img src="http://www.ikea.com/gb/en/images/products/dr%C3%B6na-box-blue__0162140_pe317380_s4.jpg" alt="poplular product" class="content-img"/>
			</div>
	</div>
</div>

Answer 1

发生这种情况是因为 .hideproduct 仅更改容器的宽度，高度设置为 100%，这将在容器内显示图像。您可以设置 .hideproduct 以将高度也设置为 0，这将解决问题，但可能不是您想要的行为。

更好的解决方案是设置 .hideproduct 来修改边距，将容器移出视口(viewport)。

function toggleProduct(){ document.getElementById("popular-product").classList.toggle("hideproduct");}

#popular-product.hideproduct{
	margin:0 0 0 -316px;
  -webkit-transition: margin 0.35s ease-in-out;
  -moz-transition: margin 0.35s ease-in-out;
  -o-transition:margin 0.35s ease-in-out;
  transition:margin 0.35s ease-in-out;
}
#popular-product{
  margin: 0 0 0 0;
	position:absolute;
	bottom:0;
	height:100%;
	width:316px;
	background-color:rgb(236, 236, 236);
	background-color:rgba(236, 236, 236, 0.31);
	padding-top:4px;
	padding-bottom:4px;
	padding-left:8px;
	padding-right:8px;
  -webkit-transition: width 0.35s ease-in-out;
  -moz-transition: width 0.35s ease-in-out;
  -o-transition:width 0.35s ease-in-out;
  transition:width 0.35s ease-in-out;
}
#popular-product .popular-product-box{
	margin:8px 0px;
	padding:2px 1px;
	height:168px;
}
#popular-product .popular-product-box:first-child{
	margin:0px;
}
#popular-product .popular-product-box .inner-content{
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	box-shadow:0px 2px 4px rgba(0,0,0,0.1);
	-webkit-box-shadow:0px 2px 4px rgba(0,0,0,0.1);
	-moz-box-shadow:0px 2px 4px rgba(0,0,0,0.1);
	background-color:#ffffff;
	height:166px;
	text-align:center;
}
.content-img{
	height:104px;
	width:86px;
}
.popular-product-box .inner-content span{
	margin-top:0px;
	font-size:16px;
}

span.off-circle{
    font-size: 13px;
    padding-top: 10px;
    color: #fff;
    border-radius: 100% 100%;
    -webkit-border-radius:100% 100%;
	-moz-border-radius:100% 100%;	
    padding-bottom: 10px;
    padding-left: 2px;
    padding-right: 2px;
    position: absolute;
    z-index: 2;
    right: 15px;
    top: 10px;
	background-color: rgb(210, 14, 14);
    background-color: rgba(210, 14, 14, 0.78);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/titatoggle/1.2.14/titatoggle-dist-min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  .checkbox-slider--b input+span:after {
				top: -7px;
			}	
</style>
<div class="col-md-12 col-sm-12" id="s-c-box">
				<div class="row text-center">
					<div class="checkbox checkbox-slider--b checkbox-slider-md">
						<label>
							<input type="checkbox" checked id="product-switch" onChange="toggleProduct();"/><span style="position:relative;">Show/Hide</span>
						</label>
					</div>	
				</div>
			</div>

<div id="popular-product">
	<div class="popular-product-box">
			<div class="inner-content">
				<span class="off-circle">70%<small>off</small></span>
				<img src="http://www.ikea.com/gb/en/images/products/dr%C3%B6na-box-blue__0162140_pe317380_s4.jpg" alt="poplular product" class="content-img"/>
			</div>
	</div>
</div>