Codrops -选择灵感和引导

Question

我使用Bootstrap和滴滴 -Click这个链接来演示，我有9个div，当我悬停在列-1或列-2上时，它会打开选择选项，就像在演示中一样，

我的问题是，当选项打开时，它不应该覆盖在第2行上，所以我在所有列的悬停上给出了填充底部，这样我就可以获得显示select元素选项的空间，但是每当打开它时，它就会折叠整个结构，并在第2行中得到最后一个div，我尝试给出显示: table；for row和display: table-cell；对于什么都没有解决的列。

这些是整个标记

<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;
}

Answer 1

我自己解决了这个问题，把屏幕大的时候，把它切成三片，当屏幕小的时候把它切成两块，然后用另一个“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');

}