我在表中有一个自定义选择列表,但是在选择列表中的绝对位置在表和填充高度表中不起作用,我希望选择列表覆盖表而不填充高度
表格代码:
<div class="container">
<div class="row">
<div class="main">
<table class="table table-striped mytable">
<thead class="bg-gradient-pink">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
JS代码:
/*****Custom Selectbox*****/
function create_custom_dropdowns() {
$('select').each(function(i, select) {
if (!$(this).next().hasClass('mydropdown')) {
$(this).after('<div class="mydropdown ' + ($(this).attr('class') || '') + '" tabindex="0"><span class="current"></span><div class="list"><ul></ul></div></div>');
var dropdown = $(this).next();
var options = $(select).find('option');
var selected = $(this).find('option:selected');
dropdown.find('.current').html(selected.data('display-text') || selected.text());
options.each(function(j, o) {
var display = $(o).data('display-text') || '';
dropdown.find('ul').append('<li class="option ' + ($(o).is(':selected') ? 'selected' : '') + '" data-value="' + $(o).val() + '" data-display-text="' + display + '">' + $(o).text() + '</li>');
});
}
});
}
// Event listeners
// Open/close
$(document).on('click', '.mydropdown', function(event) {
$('.mydropdown').not($(this)).removeClass('open');
$(this).toggleClass('open');
if ($(this).hasClass('open')) {
$(this).find('.option').attr('tabindex', 0);
$(this).find('.selected').focus();
} else {
$(this).find('.option').removeAttr('tabindex');
$(this).focus();
}
});
// Close when clicking outside
$(document).on('click', function(event) {
if ($(event.target).closest('.mydropdown').length === 0) {
$('.mydropdown').removeClass('open');
$('.mydropdown .option').removeAttr('tabindex');
}
event.stopPropagation();
});
// Option click
$(document).on('click', '.mydropdown .option', function(event) {
$(this).closest('.list').find('.selected').removeClass('selected');
$(this).addClass('selected');
var text = $(this).data('display-text') || $(this).text();
$(this).closest('.mydropdown').find('.current').text(text);
$(this).closest('.mydropdown').prev('select').val($(this).data('value')).trigger('change');
});
// Keyboard events
$(document).on('keydown', '.mydropdown', function(event) {
var focused_option = $($(this).find('.list .option:focus')[0] || $(this).find('.list .option.selected')[0]);
// Space or Enter
if (event.keyCode == 32 || event.keyCode == 13) {
if ($(this).hasClass('open')) {
focused_option.trigger('click');
} else {
$(this).trigger('click');
}
return false;
// Down
} else if (event.keyCode == 40) {
if (!$(this).hasClass('open')) {
$(this).trigger('click');
} else {
focused_option.next().focus();
}
return false;
// Up
} else if (event.keyCode == 38) {
if (!$(this).hasClass('open')) {
$(this).trigger('click');
} else {
var focused_option = $($(this).find('.list .option:focus')[0] || $(this).find('.list .option.selected')[0]);
focused_option.prev().focus();
}
return false;
// Esc
} else if (event.keyCode == 27) {
if ($(this).hasClass('open')) {
$(this).trigger('click');
}
return false;
}
});
create_custom_dropdowns();
实时版本:jsfiddle
(在最后一行中可以看到为选择列表添加了一些空白)
答案 0 :(得分:1)
您可以在最后删除此添加的间隙,但是在打开列表以为其留出空格时,它将再次出现。
最简单的方法是添加:
transform: scale(0);
在 .mydropdown .list 类
上