点击后 - 显示隐藏的内容

Question

如何点击此链接后才能制作“查看”这个隐藏的内容？

到目前为止，我实施的是当我将鼠标悬停时，我想要点击它。

但有些事情没有用。

我该怎么办？用jQuery？

.tresc-ukryta {
    display: none;
    border:1px solid #000;
    background: #fff;
    position: absolute;
    width: 400px;
    min-height: 400px;
    top: 0;
    z-index: 50;
    border-radius: 5px;
    border: 1px solid #acacac;
    -webkit-box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.75);
}
.product-item {
    position: relative;
    border:1px solid #000;
}
.tresc-ukryta-left {
    width: 180px;
    float: left;
}
.hr-line {
    height: 1px;
    background: #acacac;
}
.tresc-ukryta-right {
    width: 190px;
    float: left;
    border-left: 1px solid #acacac;
    padding-left: 10px;
    padding-top: 10px;
}
.product-item:hover .tresc-ukryta {
    display: block;
}
.product-item:hover .pokaz-ukryta {
    visibility: hidden;
}

<div class="product-item">
	<a href="#" class="title-3">Szafa ubraniowa dwusegmentowa </a>
 		<a href="#" class="title-4">model: sum320<br>Wymiar: 800x400x400</a>
	<a href="#" class="product-item-image"><img src="images/product-list-toplayer.jpg"></a>
								
		<div class="price-box">
  				<span class="price">Cena: </span>
			<span class="price-2">265zł</span>
			<span class="price-3">NETTO</span>
 		</div>
								
		<div class="clearfix"></div>
			<a href="#" class="zobacz">Zobacz</a>
			<div class="tresc-ukryta hidden-xs">
			<div class="tresc-ukryta-left">
			<a href="#" class="title-3">Szafa ubraniowa dwusegmentowa </a>
			<a href="#" class="title-4">model: sum320<br>Wymiar: 800x400x400</a>
			<a href="#" class="product-item-image"><img src="images/product-list-toplayer.jpg"></a>
										
			<div class="price-box">
				<span class="price">Cena: </span>
				<span class="price-2">265zł</span>
				<span class="price-3">NETTO</span>
			</div>
		</div>
									
		<div class="tresc-ukryta-right">
									
		<p>Opis:<br>

										2-segmentowa metalowa szafa ubraniowa pokryta farbą proszkową. Korpus i drzwi szafy w kolorze jasnoszarym RAL 7035.
										Drzwi wyposażone w wywietrzniki. W każdym segmencie znajduje się półka oraz drążek z haczykami na ubrania. Szafka zamykana zamkiem kluczowym z ryglem w jednym punkce. .</p>
										
	<a href="#" class="zapytaj">Zapytaj o produkt</a>
									
	</div>
									
	<div class="clearfix"></div>
									
	<div class="hr-line"></div>
									
	<div class="tresc-ukryta-bottom">
									
	<p>Dostępna kolorystyka:</p>
										
	<div class="ral-ukryty">
	<a href="#"><img src="images/ral.jpg"></a>
	<p>RAL 7035</p>
	</div>
										
	<div class="ral-ukryty">
    <a href="#"><img src="images/ral.jpg"></a>
	<p>RAL 7035</p>
	</div>
										
	<div class="ral-ukryty">
	<a href="#"><img src="images/ral.jpg"></a>
		<p>RAL 7035</p>
	</div>
	<div class="ral-ukryty">
		<a href="#"><img src="images/ral.jpg"></a>
		<p>RAL 7035</p>
	</div>
    <div class="ral-ukryty">
		<a href="#"><img src="images/ral.jpg"></a>
		<p>RAL 7035</p>
	</div>
										
	<div class="ral-ukryty">
		<a href="#"><img src="images/ral.jpg"></a>
		<p>RAL 7035</p>
	</div>
										
	<div class="ral-ukryty">
		<a href="#"><img src="images/ral.jpg"></a>
		<p>RAL 7035</p>
	</div>
	<div class="ral-ukryty">
		<a href="#"><img src="images/ral.jpg"></a>
		<p>RAL 7035</p>
	</div>
										
	<div class="ral-ukryty">
		<a href="#"><img src="images/ral.jpg"></a>
		<p>RAL 7035</p>
	</div>
									
    </div>
									
									
  </div>
</div>

Answer 1

如果你希望div在点击时显示而不是在悬停时使用jQuery

$(".Zobacz").click(function(){
  $(".tresc-ukryta").css("display", "block");
});

请记住选择关闭div，意味着再次显示：none。