フレックスボックスとメディアクエリについて

Question

<header>
	<div class="container">
		<div class="header-inner">
			<button class="hamburger" id="mobile-menu"></button>
		</div><!-- /.header-inner -->
	</div><!-- /.container -->
</header>

<nav>
	<div class="container">
		<ul class="navbar">
			<li><a href="#">ホーム</a></li>
			<li><a href="#">会社案内</a></li>
			<li><a href="#">製品案内</a></li>
			<li><a href="#">サポート</a></li>
			<li><a href="#">お問い合わせ</a></li>
		</ul>
	</div>
</nav>

hamburger {
	border: none;
	width: 50px;
	height: 50px;
	background: url("ハンバーガーメニューの画像") no-repeat;
	background-size: contain;
}

.navbar {
	display: none;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background: #565656;
}
.navbar li a {
	display: block;
	padding: 10px 8px;
	color: #fff;
	text-decoration: none;
}

@media only screen and (min-width: 768px) {
	.hamburger {
		display: none;
	}
	.navbar {
		display: flex !important;
		justify-content: flex-end;
	}
}

(function($){
	$('#mobile-menu').on('click', function(){
		$('.navbar').slideToggle()
	})
})(jQuery);

編集したので、もう一度よろしくお願いいたします

画面幅が768px以上の時に、navbarクラスにdisplay:flexを設定し、このブレークポイントを境にdisplay:flexとdisplay: none;は切り替わるのですが、jQueryを付け加えると、機能しなくなり、うまく表示できていないです。display:flexに!importantを追加すると解決しますが、理由がわかりません

どなたか教えていただけたら幸いです。

Answer 1

動くサンプル：https://jsfiddle.net/wo5mqzbu/

とりあえずChrome/Firefoxでは効いていますね。
リロードしてみてください。

【【みんなの知識 ちょっと便利帳】Webページを最新の状態で見る - ブラウザーのフルリロード、スーパーリロード方法】
http://www.benricho.org/Tips/page_reload/

【Chromeブラウザでスーパーリロードする方法 #Pistatium】
http://kimihiro-n.appspot.com/show/86002

Comments

[kazu25]

ありがとうございます。確認したら動いておりましたが、jQueryをつけるとうまく機能しなくなりました

[kei344]

$('.navbar').parent().slideToggle()
かな。「消す」ために「display:none」を使用するメソッドはflex等に対応しないことが多いです。

Answer 2

jQueryの呼び出し方が原因です．

http://w3q.jp/t/6021

DOM操作に即時関数は向きません．

なので，

(function($){
    $('#mobile-menu').on('click', function(){
        $('.navbar').slideToggle();
    });
})(jQuery);

ではなくて，

$(function(){
    $('#mobile-menu').on('click', function(){
        $('.navbar').slideToggle();
    });
});

なら無事動くのです．