Codrops - インスピレーションとブートストラップを選択

Question

私はブートストラップを使用しています。Codrops - デモ用にこのリンクをクリックしてください。カラム1またはカラム2にカーソルを合わせると、選択肢のある9つのdivがあります。

私の問題は、オプションが開いているときに2行目にオーバーレイしないようにするため、すべての列の上にパディングボトムを付けて、表示するスペースを確保します。 select要素のオプションはうまくいきますが、それが開いたときに構造体全体を折りたたんで2行目の最後の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'); 
}); 

}）

を働いていません。私は画面が大きくて画面が小さいなどと包まあるときに、2つとしてそれをスライスするとき3で、それをスライス「マウスオーバー」に関するすべてのdivをカウントすることにより、自分でそれを解決し

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」でそれが私にとって完璧に動作し、「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'); 

} 

ある