問題 × 解決策

jQueryプラグイン「matchHeight」を解除する方法

問題

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/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2 × 3 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧