現在、非表示になっているサブナビゲーション（.nav-sub-wrapper）があります。モバイル/タブレットデバイスで表示された場合のみ表示する必要があります。私はdisplay:noneでdivを設定しましたが、モバイル/タブレットデバイスの場合は表示するか、display:blockに切り替えることはできません。私はdivをjQueryで非表示にするように設定しましたが、再びモバイル/タブレットデバイスで表示するようにdivを設定することはできません。私は、あなたのテストに==を使用していることがわかりディスプレイからdivを表示/非表示に切り替える方法
if($(window).width() == '768'){
$(".nav-sub-wrapper").hide();
$(".hamburger").on('click', function(){
$(".nav-sub-wrapper").toggle();
});
}
、あなたの代わりに< =を入れてみてくださいでした。次に、数字ではなく文字列として768を指定し、それを変更しようとします。デスクトップブラウザ上でWebサイトをテストする場合にも、多分あなたは（.resizeにコードを置くことを試みることができる）、そのよう：
<!doctype html>
<html>
<head>
<title>test</title>
<style>
.nav-sub-wrapper {
height: 100px;
width: 100px;
background-color: blue;
}
.hamburger {
position: absolute;
top: 0;
right: 0;
width: 25px;
height: 25px;
background-color: red;
}
</style>
</head>
<body>
<div class="nav-sub-wrapper"></div>
<div class="hamburger"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.js"></script>
<script>
function navHidden() {
if($(window).width() <= 768){
$(".nav-sub-wrapper").hide();
$(".hamburger").on('click', function(){
$(".nav-sub-wrapper").toggle();
});
}else{
$(".nav-sub-wrapper").show();
}
}
$(window).resize(function() {
navHidden();
});
$(document).ready(function(){
navHidden();
});
</script>
</body>
</html>
私はまた.navサブラッパー表示させ、他の条件を追加しました幅768ピクセル以上あなたのナビゲータでこれを試して、それがあなたが期待したものと一致するかどうか教えてください;-)
これは効果がありません。ウィンドウのサイズを768px以下に変更してもdivが表示されています – user3438917
回答を編集しました;） – Lou
コンソールで動作するようになっていますが、私のコードと合併することはほとんどありません。すべてのコードをnav hidden関数でロックしなくても問題ありません。またはそのブレークポイントを更新する必要はありません。ソリューションのサンプルを混在して提供できますか？ – user3438917
メディアクエリを使用してcss自体で行うことができます。また、次のクラスのみの画面幅は768px次に小さいデバイス上に表示されます特定の画面上に表示するコンテンツは
のサイズ/非表示にブートストラップクラスを使用することができ
@media screen and (max-width: 768px) {
.nav-sub-wrapper {
display:block;
}
}
。
visible-xs-block
は、ここで私はディスプレイ用のメディアクエリを使用したいdocumentation
です。ハンバーガーが正しいサイズでしか見えない場合、ハンバーガーは必要ありません。
$(document).ready(function() {
$(".hamburger").on('click', function() {
$(".nav-sub-wrapper").toggle();
});
}).nav-sub-wrapper {
display: none;
}
.hamburger {
display: none;
}
@media (max-width: 768px) {
.hamburger {
display: block;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-sub-wrapper">
here</div>
<input type=button value=hamburger class="hamburger" />
あなたのフレームワークのためのブートストラップを使用していますか？ – Korgrue
それを表示するクラスを追加しようとする可能性があります... –
'.hidden-md-down'と' display：block'をトグルするdivのクラスを切り替えることを試みましたが、そうではありませんいずれかの作業。 – user3438917