クリックしたコンテナの高さを変更するonclickイベントで同じ列の高さを維持する

この特定の問題は解決できません。私がする必要があることは、同じ高さでレイアウト上のすべての列を持つことです。問題は - 通常は - それらのすべてが異なる情報を持つことができます。最小高さ。クリックしたコンテナの高さを変更するonclickイベントで同じ列の高さを維持する

これは、min-heightまたはMatchHeight Jqueryプラグインで実際に解決するのが簡単です。問題は、各ボックスの最後にある "másinformación"リンクをクリックするとコンテナの高さが広がり、より多くの情報が表示されるため、この動作によってMatchHeightプラグインが別の方法で動作し、レイアウトが破られることです。どんな助けも本当に高く評価されます。

フレックスボックスまたはjqueryソリューションが私に役立ちます。

Here's a Pencode where you can check the problem

ここではHTMLです：

<section class="content col-lg-10 col-md-12 col-xs-12 col-lg-offset-1"> 

       <section class="employees"> 
        <div class="row"> 
         <div class="box-container col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
         <div class="employee-box"> 
          <img src="assets/img/employees/avatar-employee.png" alt=""> 
          <h3>Raúl García Boleda</h3> 
          <h4 class="position">Asset Manager</h4> 
          <h5 class="area">Recovery</h5> 
          <h5 class="area">Recovery</h5> 
          <h5 class="area">Recovery</h5> 
          <div class="extra-info"> 
          <h3>Teléfonos</h3> 
          <h5 class="area">M. corto: 20 453 7621</h5> 
          <h5 class="area">Móvil: 20 453 7620</h5> 
          <h5 class="area">Ext.: 20 750 9441</h5> 
          <h5 class="area">Fijo: 20 750 9442</h5> 
          <h3>Email</h3> 
          <h5>[email protected]</h5> 
          <h3>Ubicación</h3> 
          <h5 class="area">Planta 2, Área 5</h5> 
          </div>       
          <span class="dropdown">más información</span> 
         </div> 
         </div> 
         <div class="box-container col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
         <div class="employee-box"> 
          <img src="assets/img/employees/avatar-employee.png" alt=""> 
          <h3>Raúl García Boleda Raúl García Boleda Raúl García Boleda Raúl García Boleda Raúl García Boleda Raúl García BoledaRaúl García Boleda Raúl García Boleda Raúl García BoledaRaúl García Boleda Raúl García Boleda Raúl García Boleda</h3> 
          <h4 class="position">Asset Manager</h4> 
          <h5 class="area">Recovery</h5> 
          <div class="extra-info"> 
          <h3>Teléfonos</h3> 
          <h5 class="area">M. corto: 20 453 7621</h5> 
          <h5 class="area">Móvil: 20 453 7620</h5> 
          <h5 class="area">Ext.: 20 750 9441</h5> 
          <h5 class="area">Fijo: 20 750 9442</h5> 
          <h3>Email</h3> 
          [email protected] 
          <h3>Ubicación</h3> 
          <h5 class="area">Planta 2, Área 5</h5> 
          </div>       
          <span class="dropdown">más información</span> 
         </div> 
         </div> 
         <div class="box-container col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
         <div class="employee-box"> 
          <img src="assets/img/employees/avatar-employee.png" alt=""> 
          <h3>Raúl García Boleda</h3> 
          <h4 class="position">Asset Manager</h4> 
          <h5 class="area">Recovery</h5> 
          <h5 class="area">Recovery</h5> 
          <h5 class="area">Recovery</h5> 
          <div class="extra-info"> 
          <h3>Teléfonos</h3> 
          <h5 class="area">M. corto: 20 453 7621</h5> 
          <h5 class="area">Móvil: 20 453 7620</h5> 
          <h5 class="area">Ext.: 20 750 9441</h5> 
          <h5 class="area">Fijo: 20 750 9442</h5> 
          <h3>Email</h3> 
          [email protected] 
          <h3>Ubicación</h3> 
          <h5 class="area">Planta 2, Área 5</h5> 
          </div>       
          <span class="dropdown">más información</span> 
         </div> 
         </div> 
         <div class="box-container col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
         <div class="employee-box"> 
          <img src="assets/img/employees/avatar-employee.png" alt=""> 
          <h3>Raúl García Boleda</h3> 
          <h4 class="position">Asset Manager</h4> 
          <h5 class="area">Recovery</h5> 
          <div class="extra-info"> 
          <h3>Teléfonos</h3> 
          <h5 class="area">M. corto: 20 453 7621</h5> 
          <h5 class="area">Móvil: 20 453 7620</h5> 
          <h5 class="area">Ext.: 20 750 9441</h5> 
          <h5 class="area">Fijo: 20 750 9442</h5> 
          <h3>Email</h3> 
          [email protected] 
          <h3>Ubicación</h3> 
          <h5 class="area">Planta 2, Área 5</h5> 
          </div>       
          <span class="dropdown">más información</span> 
         </div> 
         </div>   
        </div>  
       </section> 
       <section class="employees"> 
        <div class="row">      
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
         <div class="employee-box"> 
         <img src="assets/img/employees/avatar-employee.png" alt=""> 
         <h3>Raúl García Boleda</h3> 
         <h4 class="position">Asset Manager</h4> 
         <h5 class="area">Recovery</h5> 
         <div class="extra-info"> 
          <h3>Teléfonos</h3> 
          <h5 class="area">M. corto: 20 453 7621</h5> 
          <h5 class="area">Móvil: 20 453 7620</h5> 
          <h5 class="area">Ext.: 20 750 9441</h5> 
          <h5 class="area">Fijo: 20 750 9442</h5> 
          <h3>Email</h3> 
          [email protected] 
          <h3>Ubicación</h3> 
          <h5 class="area">Planta 2, Área 5</h5> 
         </div>       
         <span class="dropdown">más información</span> 
         </div> 
        </div> 
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
         <div class="employee-box"> 
         <img src="assets/img/employees/avatar-employee.png" alt=""> 
         <h3>Raúl García Boleda</h3> 
         <h4 class="position">Asset Manager</h4> 
         <h4 class="position">Asset Manager</h4> 
         <h4 class="position">Asset Manager</h4> 
         <h5 class="area">Recovery</h5> 
         <div class="extra-info"> 
          <h3>Teléfonos</h3> 
          <h5 class="area">M. corto: 20 453 7621</h5> 
          <h5 class="area">Móvil: 20 453 7620</h5> 
          <h5 class="area">Ext.: 20 750 9441</h5> 
          <h5 class="area">Fijo: 20 750 9442</h5> 
          <h3>Email</h3> 
          [email protected] 
          <h3>Ubicación</h3> 
          <h5 class="area">Planta 2, Área 5</h5> 
         </div>       
         <span class="dropdown">más información</span> 
         </div> 
        </div> 
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
         <div class="employee-box"> 
         <img src="assets/img/employees/avatar-employee.png" alt=""> 
         <h3>Raúl García Boleda</h3> 
         <h4 class="position">Asset Manager</h4> 
         <h5 class="area">Recovery</h5> 
         <div class="extra-info"> 
          <h3>Teléfonos</h3> 
          <h5 class="area">M. corto: 20 453 7621</h5> 
          <h5 class="area">Móvil: 20 453 7620</h5> 
          <h5 class="area">Ext.: 20 750 9441</h5> 
          <h5 class="area">Fijo: 20 750 9442</h5> 
          <h3>Email</h3> 
          [email protected] 
          <h3>Ubicación</h3> 
          <h5 class="area">Planta 2, Área 5</h5> 
         </div>       
         <span class="dropdown">más información</span> 
         </div> 
        </div> 
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
         <div class="employee-box"> 
         <img src="assets/img/employees/avatar-employee.png" alt=""> 
         <h3>Raúl García Boleda</h3> 
         <h4 class="position">Asset Manager</h4> 
         <h5 class="area">Recovery</h5> 
         <div class="extra-info"> 
          <h3>Teléfonos</h3> 
          <h5 class="area">M. corto: 20 453 7621</h5> 
          <h5 class="area">Móvil: 20 453 7620</h5> 
          <h5 class="area">Ext.: 20 750 9441</h5> 
          <h5 class="area">Fijo: 20 750 9442</h5> 
          <h3>Email</h3> 
          [email protected] 
          <h3>Ubicación</h3> 
          <h5 class="area">Planta 2, Área 5</h5> 
         </div>       
         <span class="dropdown">más información</span> 
         </div> 
        </div> 
        </div>          
       </section>                         
      </section>

ここSCSSです：

/*Colors*/ 
$body-blue: #ebeff2; 
$deep-blue: #013662; 
$light-blue: #0160a2; 
$off-blue: #91bfdf; 
$secondary-blue: #003561; 
$title-bg: #c5d8e8; 
$white: #fff; 

body { 
    background-color: $body-blue; 
    color: #999; 
    display:flex; 
    flex-direction:column; 
    font: 300 16px 'Asap-Regular', sans-serif; 
    margin:0; 
    min-height: 100%; 
    padding:0; 
} 

@mixin article-box { 
    background-color: $white; 
    box-shadow: 0 0.125em 0.125em rgba(0, 53, 97, 0.05); 
    .date { 
     font-size: 0.75em; 
     text-transform: uppercase;   
    } 
    p { 
     color: #0060a1; 
     font-size: 1em; 
     line-height: normal;    
    }  
} 

.box-container { 
    position:relative; 
    height:17em; 
} 
.employee-box { 
@include article-box; 
margin-bottom:1em; 
padding:1em; 
text-align:center; 
width:100%; 
h3,h4,h5 { 
    line-height:.8em 
} 
h3 { 
    color:$secondary-blue; 
    font-size: 0.875em; 
    font-weight: 700; 
} 
.area { 
    font-size: 0.875em; 
    font-weight: 400; 
} 
.extra-info { 
    display:none; 
} 
.position { 
    color: $secondary-blue; 
    font-size: 0.875em; 
    font-weight: 400; 
} 
.dropdown { 
    background:url(../img/forms/down-arrow.png) no-repeat left 50%; 
    color: #005fa0; 
    cursor:pointer; 
    display:inline-block; 
    font-size: 0.875em; 
    font-weight: 400; 
    margin-top: 2em; 
    padding-left:1em; 
    vertical-align: middle; 
} 
&.current { 
    background-color:#0160a2; 
    color:#9cc4e7; 
    max-height:500px; 
    position: relative; 
    z-index: 9999; 
    h3 { 
     color: white; 
    } 
    h4 { 
     color:#9cc4e7; 
    } 
    .dropdown { 
     background:url(../img/forms/up-arrow.png) no-repeat left 50%; 
     color: white; 
    } 
    .extra-info { 
     display:block; 
    } 
} 
}

出典

2017-01-26 Lowtrux

あなたのためにこの仕事をしていますか？はいの場合は、回答として追加します。 https://codepen.io/anon/pen/PWJaKx –

@SergChernataに感謝しますが、残念ながら私の場合はうまくいきません。各ボックスの最後にあるリンクをクリックすると、そのボックスの高さは、ボックスの下にあるものと重複して変更する必要があります（元の動作のように）。そのため、あなたの答えの問題は、その列の箱もその高さを変える。試していただきありがとうございます、これは実際に行うことができますか？私は本当に欲求不満です。 – Lowtrux

これは私がJavaScriptの策略に頼らずにそれを得ることが可能な限り近いです。

$('.main-menu ul li').click(function(e) { 
 
    $('.main-menu ul li').not($(this)).removeClass('current'); 
 
    $(this).toggleClass('current');  
 
}); 
 
$('.employee-box .dropdown').click(function(e) { 
 
    $('.employee-box .dropdown').not($(this)).closest('.employee-box').removeClass('current'); 
 
    $(this).closest('.employee-box').toggleClass('current');   
 
});

/*Colors*/ 
 
.row { 
 
    margin-bottom: 3rem; 
 
    display: flex; 
 
} 
 

 
body { 
 
    background-color: #ebeff2; 
 
    color: #999; 
 
    display: flex; 
 
    flex-direction: column; 
 
    font: 300 16px 'Asap-Regular', sans-serif; 
 
    margin: 0; 
 
    min-height: 100%; 
 
    padding: 0; 
 
} 
 

 
.box-container { 
 
    position: relative; 
 
    height: 17em; 
 
} 
 

 
.employee-box { 
 
    background-color: #fff; 
 
    box-shadow: 0 0.125em 0.125em rgba(0, 53, 97, 0.05); 
 
    margin-bottom: 1em; 
 
    padding: 1em; 
 
    min-height: 100%; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.employee-box .date { 
 
    font-size: 0.75em; 
 
    text-transform: uppercase; 
 
} 
 
.employee-box p { 
 
    color: #0060a1; 
 
    font-size: 1em; 
 
    line-height: normal; 
 
} 
 
.employee-box h3, .employee-box h4, .employee-box h5 { 
 
    line-height: 0.8em; 
 
} 
 
.employee-box h3 { 
 
    color: #003561; 
 
    font-size: 0.875em; 
 
    font-weight: 700; 
 
} 
 
.employee-box .area { 
 
    font-size: 0.875em; 
 
    font-weight: 400; 
 
} 
 
.employee-box .extra-info { 
 
    display: none; 
 
} 
 
.employee-box .position { 
 
    color: #003561; 
 
    font-size: 0.875em; 
 
    font-weight: 400; 
 
} 
 
.employee-box .dropdown { 
 
    background: url(../img/forms/down-arrow.png) no-repeat left 50%; 
 
    color: #005fa0; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-size: 0.875em; 
 
    font-weight: 400; 
 
    margin-top: 2em; 
 
    padding-left: 1em; 
 
    vertical-align: middle; 
 
} 
 
.employee-box.current { 
 
    background-color: #0160a2; 
 
    color: #9cc4e7; 
 
    max-height: 500px; 
 
    position: relative; 
 
    z-index: 9999; 
 
} 
 
.employee-box.current h3 { 
 
    color: white; 
 
} 
 
.employee-box.current h4 { 
 
    color: #9cc4e7; 
 
} 
 
.employee-box.current .dropdown { 
 
    background: url(../img/forms/up-arrow.png) no-repeat left 50%; 
 
    color: white; 
 
} 
 
.employee-box.current .extra-info { 
 
    display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<section class="content col-lg-10 col-md-12 col-xs-12 col-lg-offset-1"> 
 
      
 
        <section class="employees"> 
 
         <div class="row"> 
 
          <div class="box-container col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
 
          <div class="employee-box"> 
 
           <img src="assets/img/employees/avatar-employee.png" alt=""> 
 
           <h3>Raúl García Boleda</h3> 
 
           <h4 class="position">Asset Manager</h4> 
 
           <h5 class="area">Recovery</h5> 
 
           <h5 class="area">Recovery</h5> 
 
           <h5 class="area">Recovery</h5> 
 
           <div class="extra-info"> 
 
           <h3>Teléfonos</h3> 
 
           <h5 class="area">M. corto: 20 453 7621</h5> 
 
           <h5 class="area">Móvil: 20 453 7620</h5> 
 
           <h5 class="area">Ext.: 20 750 9441</h5> 
 
           <h5 class="area">Fijo: 20 750 9442</h5> 
 
           <h3>Email</h3> 
 
           <h5>[email protected]</h5> 
 
           <h3>Ubicación</h3> 
 
           <h5 class="area">Planta 2, Área 5</h5> 
 
           </div>       
 
           <span class="dropdown">más información</span> 
 
          </div> 
 
          </div> 
 
          <div class="box-container col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
 
          <div class="employee-box"> 
 
           <img src="assets/img/employees/avatar-employee.png" alt=""> 
 
           <h3>Raúl García Boleda Raúl García Boleda Raúl García Boleda Raúl García Boleda Raúl García Boleda Raúl García BoledaRaúl García Boleda Raúl García Boleda Raúl García BoledaRaúl García Boleda Raúl García Boleda Raúl García Boleda</h3> 
 
           <h4 class="position">Asset Manager</h4> 
 
           <h5 class="area">Recovery</h5> 
 
           <div class="extra-info"> 
 
           <h3>Teléfonos</h3> 
 
           <h5 class="area">M. corto: 20 453 7621</h5> 
 
           <h5 class="area">Móvil: 20 453 7620</h5> 
 
           <h5 class="area">Ext.: 20 750 9441</h5> 
 
           <h5 class="area">Fijo: 20 750 9442</h5> 
 
           <h3>Email</h3> 
 
           [email protected] 
 
           <h3>Ubicación</h3> 
 
           <h5 class="area">Planta 2, Área 5</h5> 
 
           </div>       
 
           <span class="dropdown">más información</span> 
 
          </div> 
 
          </div> 
 
          <div class="box-container col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
 
          <div class="employee-box"> 
 
           <img src="assets/img/employees/avatar-employee.png" alt=""> 
 
           <h3>Raúl García Boleda</h3> 
 
           <h4 class="position">Asset Manager</h4> 
 
           <h5 class="area">Recovery</h5> 
 
           <h5 class="area">Recovery</h5> 
 
           <h5 class="area">Recovery</h5> 
 
           <div class="extra-info"> 
 
           <h3>Teléfonos</h3> 
 
           <h5 class="area">M. corto: 20 453 7621</h5> 
 
           <h5 class="area">Móvil: 20 453 7620</h5> 
 
           <h5 class="area">Ext.: 20 750 9441</h5> 
 
           <h5 class="area">Fijo: 20 750 9442</h5> 
 
           <h3>Email</h3> 
 
           [email protected] 
 
           <h3>Ubicación</h3> 
 
           <h5 class="area">Planta 2, Área 5</h5> 
 
           </div>       
 
           <span class="dropdown">más información</span> 
 
          </div> 
 
          </div> 
 
          <div class="box-container col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
 
          <div class="employee-box"> 
 
           <img src="assets/img/employees/avatar-employee.png" alt=""> 
 
           <h3>Raúl García Boleda</h3> 
 
           <h4 class="position">Asset Manager</h4> 
 
           <h5 class="area">Recovery</h5> 
 
           <div class="extra-info"> 
 
           <h3>Teléfonos</h3> 
 
           <h5 class="area">M. corto: 20 453 7621</h5> 
 
           <h5 class="area">Móvil: 20 453 7620</h5> 
 
           <h5 class="area">Ext.: 20 750 9441</h5> 
 
           <h5 class="area">Fijo: 20 750 9442</h5> 
 
           <h3>Email</h3> 
 
           [email protected] 
 
           <h3>Ubicación</h3> 
 
           <h5 class="area">Planta 2, Área 5</h5> 
 
           </div>       
 
           <span class="dropdown">más información</span> 
 
          </div> 
 
          </div>   
 
         </div>  
 
        </section> 
 
        <section class="employees"> 
 
         <div class="row">      
 
         <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
 
          <div class="employee-box"> 
 
          <img src="assets/img/employees/avatar-employee.png" alt=""> 
 
          <h3>Raúl García Boleda</h3> 
 
          <h4 class="position">Asset Manager</h4> 
 
          <h5 class="area">Recovery</h5> 
 
          <div class="extra-info"> 
 
           <h3>Teléfonos</h3> 
 
           <h5 class="area">M. corto: 20 453 7621</h5> 
 
           <h5 class="area">Móvil: 20 453 7620</h5> 
 
           <h5 class="area">Ext.: 20 750 9441</h5> 
 
           <h5 class="area">Fijo: 20 750 9442</h5> 
 
           <h3>Email</h3> 
 
           [email protected] 
 
           <h3>Ubicación</h3> 
 
           <h5 class="area">Planta 2, Área 5</h5> 
 
          </div>       
 
          <span class="dropdown">más información</span> 
 
          </div> 
 
         </div> 
 
         <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
 
          <div class="employee-box"> 
 
          <img src="assets/img/employees/avatar-employee.png" alt=""> 
 
          <h3>Raúl García Boleda</h3> 
 
          <h4 class="position">Asset Manager</h4> 
 
          <h4 class="position">Asset Manager</h4> 
 
          <h4 class="position">Asset Manager</h4> 
 
          <h5 class="area">Recovery</h5> 
 
          <div class="extra-info"> 
 
           <h3>Teléfonos</h3> 
 
           <h5 class="area">M. corto: 20 453 7621</h5> 
 
           <h5 class="area">Móvil: 20 453 7620</h5> 
 
           <h5 class="area">Ext.: 20 750 9441</h5> 
 
           <h5 class="area">Fijo: 20 750 9442</h5> 
 
           <h3>Email</h3> 
 
           [email protected] 
 
           <h3>Ubicación</h3> 
 
           <h5 class="area">Planta 2, Área 5</h5> 
 
          </div>       
 
          <span class="dropdown">más información</span> 
 
          </div> 
 
         </div> 
 
         <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
 
          <div class="employee-box"> 
 
          <img src="assets/img/employees/avatar-employee.png" alt=""> 
 
          <h3>Raúl García Boleda</h3> 
 
          <h4 class="position">Asset Manager</h4> 
 
          <h5 class="area">Recovery</h5> 
 
          <div class="extra-info"> 
 
           <h3>Teléfonos</h3> 
 
           <h5 class="area">M. corto: 20 453 7621</h5> 
 
           <h5 class="area">Móvil: 20 453 7620</h5> 
 
           <h5 class="area">Ext.: 20 750 9441</h5> 
 
           <h5 class="area">Fijo: 20 750 9442</h5> 
 
           <h3>Email</h3> 
 
           [email protected] 
 
           <h3>Ubicación</h3> 
 
           <h5 class="area">Planta 2, Área 5</h5> 
 
          </div>       
 
          <span class="dropdown">más información</span> 
 
          </div> 
 
         </div> 
 
         <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> 
 
          <div class="employee-box"> 
 
          <img src="assets/img/employees/avatar-employee.png" alt=""> 
 
          <h3>Raúl García Boleda</h3> 
 
          <h4 class="position">Asset Manager</h4> 
 
          <h5 class="area">Recovery</h5> 
 
          <div class="extra-info"> 
 
           <h3>Teléfonos</h3> 
 
           <h5 class="area">M. corto: 20 453 7621</h5> 
 
           <h5 class="area">Móvil: 20 453 7620</h5> 
 
           <h5 class="area">Ext.: 20 750 9441</h5> 
 
           <h5 class="area">Fijo: 20 750 9442</h5> 
 
           <h3>Email</h3> 
 
           [email protected] 
 
           <h3>Ubicación</h3> 
 
           <h5 class="area">Planta 2, Área 5</h5> 
 
          </div>       
 
          <span class="dropdown">más información</span> 
 
          </div> 
 
         </div> 
 
         </div>          
 
        </section>                         
 
       </section>

http://codepen.io/anon/pen/EZbxOe

出典

2017-01-27 12:39:56

クリックしたコンテナの高さを変更するonclickイベントで同じ列の高さを維持する

答えて

関連する問題