javascript - 溢出滚动条内表格的绝对位置

Question

我有一个自定义选择列表，在表中，但选择列表中的绝对位置在表和填充高度表中不起作用，我希望选择列表覆盖表而不填充高度

表格代码:

<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

(在最后一行可以看到为选择列表添加了一些空白)

Answer 1

您可以在最后删除这个添加的空白，但是当打开列表给它空间时它会再次出现。

最简单的方法是添加:

   transform: scale(0);

在 .mydropdown .list 类中

https://jsfiddle.net/ts81z0vg/