मैं बूटस्ट्रैप और Codrops का उपयोग कर रहा हूं - डेमो के लिए इस लिंक पर क्लिक करें, मेरे पास नौ डिव हैं जिनमें शामिल हैं जब भी मैं कॉलम -1 या कॉलम -2 पर होवर करता हूं तो विकल्पों का चयन करें और इसी तरह यह डेमो में चुनिंदा विकल्पों को खोलेगा,

मेरी समस्या यह है, जब विकल्प खुल रहे हैं तो इसे दूसरी पंक्ति पर ओवरले नहीं करना चाहिए, इसलिए मैंने सभी स्तंभों के लिए होवर पर पैडिंग तल दिया ताकि मुझे चुनिंदा तत्व के विकल्प दिखाने के लिए जगह मिल जाए, यह ठीक काम करता है लेकिन जब भी यह खुलता है यह पूरी संरचना को ध्वस्त कर देता है और दूसरी पंक्ति में अंतिम div प्राप्त करता है, मैंने डिस्प्ले देने का प्रयास किया: तालिका; पंक्तियों और प्रदर्शन के लिए: टेबल-सेल; कॉलम के लिए कुछ भी काम नहीं किया

ये हैं संपूर्ण मार्कअप

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

जे एस

 (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');
});

});

सीएसएस

.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;
}
0
lost_in_magento 27 अप्रैल 2016, 11:37

1 उत्तर

सबसे बढ़िया उत्तर

मैंने इसे 'माउसओवर' पर सभी divs की गिनती करके इसे तीन से टुकड़ा करके हल किया जब स्क्रीन बड़ी है और स्क्रीन छोटी होने पर इसे दो के रूप में टुकड़ा कर रही है और इसी तरह और एक और 'div' के साथ लपेटा गया है जहां यह मेरे लिए पूरी तरह से काम करता है और 'माउसआउट' मैंने खोल दिया और divs को वैसे ही छोड़ दिया।

यहाँ कोड है

$(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');

}
0
lost_in_magento 9 मई 2016, 09:23