![](/img/trans.png)
[英]CSS Force content below fixed DIV in responsive design using bootstrap?
[英]Displaying div content below its row in responsive design
我目前有一個8 div,它的數量可能會增加或減少。每個div都包含單擊它所顯示的內容的鏈接。在固定為1024px及更高的像素時,它可以正常工作。響應速度慢,在較低的分辨率下,要顯示的隱藏div未對齊。 有人可以幫我嗎?
這是我寫的html核心:
<div class="client-details fl_left" style="display: none;"
id="citiCab2">
<span class="pointer" style="left: 73px;"></span> <a
class="close-button" href=""></a>
<div class="client-container fl_left">
<a href="http://citicabsinc.com/" target="_blank"><img
src="images/citicabs-big.png"></a>
</div>
<div class="client-container fl_right">
<h1>Citi Cabs</h1>
<p>The client is a progressive firm, providing eminent car rental
services to all kinds for travel requirements. It caters transport
and communication to its customers all over India.</p>
<p class="title">Client Requirement </p>
<p>The client wanted to come up with a website portal, that can be
navigated with ease by the visitor who is looking for the car
service within Bangalore and anywhere in India.</p>
<p class="title">Challenge</p>
<p>We the Maganiva Solutions Team had to predominantly understand
website workflow making it intuitive for the user to use it with
ease keeping in mind the visitor's page. </p>
<p class="title">What Maganiva Solutions delivered </p>
<p>Maganiva did a complete market study to get insights and came up
with a comprehensive model, wherein we not only designed the user
friendly website but also provided back-end support to the client
in Branding its online presence through SEO.</p>
</div>
</div>
相同的Java腳本。還有助於減小代碼的大小,如您所見,我只是一次又一次地重復了相同的代碼,只是單擊鼠標單擊特定div時id有所不同。
jQuery(function() {
$('#citiCab1').click(function() {
$(".client-details").addClass('display-none');
$('#citiCab2').attr('style', function(i, style) {
jQuery(this).removeClass('display-none');
return style.replace(/display[^;]+;?/g, '');
});
$("#citiCab2").addClass('display');
});
$('#primus1').click(function() {
$(".client-details").addClass('display-none');
$('#primus2').attr('style', function(i, style) {
jQuery(this).removeClass('display-none');
return style.replace(/display[^;]+;?/g, '');
});
$("#primus2").addClass('display');
});
$('#MantriEden1').click(function() {
$(".client-details").addClass('display-none');
$('#MantriEden2').attr('style', function(i, style) {
jQuery(this).removeClass('display-none');
return style.replace(/display[^;]+;?/g, '');
});
$("#MantriEden2").addClass('display');
});
$('#DilDaruDosti1').click(function() {
$(".client-details").addClass('display-none');
$('#DilDaruDosti2').attr('style', function(i, style) {
jQuery(this).removeClass('display-none');
return style.replace(/display[^;]+;?/g, '');
});
$("#DilDaruDosti2").addClass('display');
});
$('#chai1').click(function() {
$(".client-details").addClass('display-none');
$('#chai2').attr('style', function(i, style) {
jQuery(this).removeClass('display-none');
return style.replace(/display[^;]+;?/g, '');
});
$("#chai2").addClass('display');
});
$('#mbnt1').click(function() {
$(".client-details").addClass('display-none');
$('#mbnt2').attr('style', function(i, style) {
jQuery(this).removeClass('display-none');
return style.replace(/display[^;]+;?/g, '');
});
$("#mbnt2").addClass('display');
});
$('#act1').click(function() {
$(".client-details").addClass('display-none');
$('#act2').attr('style', function(i, style) {
jQuery(this).removeClass('display-none');
return style.replace(/display[^;]+;?/g, '');
});
$("#act2").addClass('display');
});
$('#mathru1').click(function() {
$(".client-details").addClass('display-none');
$('#mathru2').attr('style', function(i, style) {
jQuery(this).removeClass('display-none');
return style.replace(/display[^;]+;?/g, '');
});
$("#mathru2").addClass('display');
});
});
希望這是您想要的內容,請嘗試以下html。 希望它對您有幫助!!!
HTML:
<p><a href="JavaScript:toggleMe('desc1');"><strong>Head1</strong></a></p>
<div class="desc" id="desc1" style="display: none;">
<h2>Description 1</h2>
<p>Content</p>
<p><a class="close" href="JavaScript:toggleMe('desc1');">Close</a></p>
</div>
<p><a href="JavaScript:toggleMe('desc2');"><strong>Head2</strong></a></p>
<div class="desc" id="desc2" style="display: none;">
<h2>Description 2</h2>
<p>Content</p>
<p><a class="close" href="JavaScript:toggleMe('desc2');">Close</a></p>
</div>
CSS:
.close{
text-align:right;
display:block;
padding:10px;
}
.desc{
background:#dedede;
padding:10px;
}
腳本:
<script>
function toggleMe(a) {
var e = document.getElementById(a);
if (!e) return true;
if (e.style.display == "none") {
e.style.display = "block"
} else {
e.style.display = "none"
}
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.