Question

我正在使用Bootstrap和Codrops - 点击此链接进行演示，每当我将鼠标悬停在第1列或第2列上时，我都有9个包含选择选项的div，依此类推＆＃39; ll打开选择选项，如演示，

我的问题是，当选项打开时，它不应该叠加在第二行上，所以我在悬停时为所有列添加了填充底部，这样我就可以获得显示选项选项的空间元素，它工作正常，但每当它打开它折叠整个结构并获得第二行中的最后一个div，我尝试给出display：table;用于行和显示：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来解决它，当屏幕较大时将其切成三个，当屏幕较小时将其切成两个等等，然后用另一个“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');

}

Codrops - 选择灵感和引导

1 个答案: