我正在使用 Bootstrap 和 Codrops -单击此链接进行演示，每当我将鼠标悬停在 column-1 或 column-2 上时，我有九个包含选择选项的 div，依此类推，它会像演示中那样打开选择选项，
我的问题是，当选项打开时，它不应该覆盖在第二行上，所以我在悬停时为所有列提供了填充底部，这样我就可以获得空间来显示选择元素的选项，它有效很好，但是每当它打开时，它就会折叠整个结构并获得第二行中的最后一个 div，我尝试给出 display: table;对于行和显示:表格单元格；对于专栏，没有任何结果
这些是整个标记
<section>
<div class="row">
<div class="col-lg-4">
<select class="column-1 cs-select cs-skin-border">
<option disabled selected value="">
Glat Request
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-2 cs-select cs-skin-border">
<option disabled selected value="">
URL Redirect
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-3 cs-select cs-skin-border">
<option disabled selected value="">
Campaign Registration
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-4 cs-select cs-skin-border">
<option disabled selected value="">
Users
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-5 cs-select cs-skin-border">
<option disabled selected value="">
Pixel Request
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-6 cs-select cs-skin-border">
<option disabled selected value="">
CRO Request
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-7 cs-select cs-skin-border">
<option disabled selected value="">
Your Request
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-8 cs-select cs-skin-border">
<option disabled selected value="">
Some Request
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
<div class="col-lg-4">
<select class="column-9 cs-select cs-skin-border">
<option disabled selected value="">
Campaign
</option>
<option value="email">
New ID
</option>
<option value="twitter">
Registration
</option>
<option value="linkedin">
Manage
</option>
</select>
</div>
</div>
</section>
JS
(function() {
[].slice.call(document.querySelectorAll('select.cs-select')).forEach(
function(el) {
new SelectFx(el);
});
})();
$(document).ready(function() {
$(".column-1").hover(function() {
//For opening the select element
$('div.column-1').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
//Padding bottom for adding space for the opened element
$('div.column-1').css('padding-bottom', '80px');
}
}, function() {
//On hover out actions
$('div.column-1').removeClass('cs-active');
$('div.column-1').css('padding-bottom', '0px');
});
$(".column-2").hover(function() {
$('div.column-2').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-2').css('padding-bottom', '80px');
};
}, function() {
$('div.column-2').removeClass('cs-active');
$('div.column-2').css('padding-bottom', '0px');
});
$(".column-3").hover(function() {
$('div.column-3').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-3').css('padding-bottom', '80px');
}
}, function() {
$('div.column-3').removeClass('cs-active');
$(this).css('padding-bottom', '0px');
});
$(".column-4").hover(function() {
$('div.column-4').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-4').css('padding-bottom', '80px');
}
}, function() {
$('div.column-4').removeClass('cs-active');
$('div.column-4').css('padding-bottom', '0px');
});
$(".column-5").hover(function() {
$('div.column-5').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-5').css('padding-bottom', '80px');
}
}, function() {
$('div.column-5').removeClass('cs-active');
$('div.column-5').css('padding-bottom', '0px');
});
$(".column-6").hover(function() {
$('div.column-6').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-6').css('padding-bottom', '80px');
}
}, function() {
$('div.column-6').removeClass('cs-active');
$('div.column-6').css('padding-bottom', '0px');
});
$(".column-7").hover(function() {
$('div.column-7').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-7').css('padding-bottom', '80px');
}
}, function() {
$('div.column-7').removeClass('cs-active');
$('div.column-7').css('padding-bottom', '0px');
});
$(".column-8").hover(function() {
$('div.column-8').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-8').css('padding-bottom', '80px');
}
}, function() {
$('div.column-8').removeClass('cs-active');
$('div.column-8').css('padding-bottom', '0px');
});
$(".column-9").hover(function() {
$('div.column-9').addClass('cs-active');
if ($(this).hasClass('cs-active')) {
$('div.column-9').css('padding-bottom', '80px');
}
}, function() {
$('div.column-9').removeClass('cs-active');
$('div.column-9').css('padding-bottom', '0px');
});
});
CSS
.col-lg-4 {
display: inline-block;
margin-bottom: 3%;
}
.row {
margin-left: 15px;
margin-right: 15px;
}
div.cs-skin-border {
font-size: 16px;
font-weight: 300;
}
最佳答案
我自己解决了这个问题，方法是计算“鼠标悬停”上的所有 div，当屏幕大时将其切成三片，当屏幕较小时将其切成两片，依此类推，然后用另一个完美运行的“div”包裹起来对于我和“mouseout”，我打开并保持 div 原样。
这是代码
$(document).ready(function() {
loadMenus();
w = $(window).width();
});
$(window).resize(function() {
if (w != $(window).width()) {
console.log('window resized..');
this.location.reload(false);
w = $(window).width();
delete w;
}
});
function loadMenus() {
var divs = $("div > div.col-lg-4:visible");
$(".toolWrapper .col-lg-4").on('mouseover', function() {
var screen = parseInt(parseInt($(".col-lg-4").css('width')) /
$(window).innerWidth() * 100);
var csOptions = $('div.cs-options').height();
var countContent;
if (screen >= 90) {
countContent = 1;
} else if (screen >= 40) {
countContent = 2;
} else if (screen >= 30) {
countContent = 3;
}
for (var i = 0; i < divs.length; i += countContent) {
divs.slice(i, i + countContent).wrapAll(
"<div class='divWraper' style='width:100%;float:left;'></div>"
);
}
$(this).find('div.cs-select').addClass('cs-active');
});
$(".toolWrapper .col-lg-4").on('mouseout', function() {
$(".col-lg-4").unwrap();
$(this).find('div.cs-select').removeClass('cs-active');
}
关于jquery - Codrops - 选择灵感和 Bootstrap ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36884533/