問題
jQueryプラグイン「matchHeight」を解除するには？
解決策
「$('要素のセレクタ').matchHeight({remove: true});」でmatchHeightを無効にする。
「matchHeight」の解除
jQueryプラグイン「matchHeight」を使用すると、タグにstyle属性で高さ（height）が設定されます。
これをスマートフォン時などは解除したい場合の方法をご紹介します。
jQueryプラグイン「matchHeight」について紹介しています。 ぜひこちらもご覧ください。
高さを揃えるjQueryライブラリ「matchHeight」がすごく便利！
DEMOはこちら
テキスト
テキスト
テキスト
テキスト
テキスト
HTMLはこちら
<div class="match_h-box">
<div class="items">
<div class="inner">
<p class="text">テキスト</p>
</div>
</div>
<div class="items">
<div class="inner">
<p class="text">テキスト<br>テキスト<br>テキスト<br>テキスト</p>
</div>
</div>
</div> CSSはこちら
.match_h-box .items{
display: inline-block;
vertical-align: top;
width: 48%;
margin: 0 2% 10px 0;
}
.match_h-box .items:last-child{
margin-right: 0;
}
.match_h-box .items .inner{
display: block;
padding: 10px 15px;
background-color: #FCF7F5;
}スマートフォン以外の時は「matchHeight」を有効にし、スマートフォン時は無効にする。
スマートフォン以外の時は「matchHeight」を有効にし、スマートフォン時は無効にします。
if( $('.match_h-box').length ){
var w = $(window).width();
if( w > 767 ){
$('.match_h-box .items .inner').matchHeight();
}else{
$('.match_h-box .items .inner').matchHeight({remove: true});
}
$(window).resize(function(){
if( w <= 768 && $(window).width() > 767 ){
$('.match_h-box .items .inner').matchHeight();
}
if( w > 767 && $(window).width() <= 768 ){
$('.match_h-box .items .inner').matchHeight({remove: true});
}
w = $(window).width();
})
}ポイント!
「$(‘要素のセレクタ’).matchHeight({remove: true});」を設定することにより、「matchHeight」を無効にすることができます。
参照
以下のサイトが、より詳しく解説してくれています。
【jQuery の matchHeight プラグインの使い方サンプル | gotohayato.com】
https://gotohayato.com/content/111/
コメント