JQUERYのクリックイベントを作成するには、特定の画面サイズでしか動作しませんか？

Question

私はウェブサイトを構築し、メディアクエリを使用してそれを反応的にしています。 jquery clickイベント（ハンバーガーメニューをクリックしてメニューを隠して表示）を使用して、小さな画面（500px <）でメニューを切り替えることができます。表示するコードはまだありません。どのようにそれを行うにはどのような提案？

Answer 1

あなたはこのコードをmenu.add hamburgurためにこのコードを使用することができます

$('button').on('click', function() { 
 
    var ww = $(window).width(); 
 
    if (ww < 500) { 
 
    console.log('click triggered at less than 500px'); 
 
    } else { 
 
    console.log('click ignored! window >= 500px'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button>CLick me</button>

Answer 2

内部のクリックイベントオフ、ちょうど入れロジックする必要はありません.SETボタンクラスのデフォルトCSS = "hamburgur" display：none.then次に、表示するメディアクエリを追加します：画面サイズが500px未満の場合はブロックします。

$(".cross").hide(); 
 
$(".menu").hide(); 
 
$(".hamburger").click(function() { 
 
$(".menu").slideToggle("slow", function() { 
 
$(".hamburger").hide(); 
 
$(".cross").show(); 
 
}); 
 
}); 
 

 
$(".cross").click(function() { 
 
$(".menu").slideToggle("slow", function() { 
 
$(".cross").hide(); 
 
$(".hamburger").show(); 
 
}); 
 
});

body{ 
 
    font-family: 'Noto Sans', sans-serif; 
 
\t margin:0; 
 
\t width:100%; 
 
\t height:100vh; 
 
    \t background:#ffffff; 
 
\t -webkit-font-smoothing: antialiased; 
 
\t -moz-osx-font-smoothing: grayscale; 
 
} 
 
header{ 
 
\t width:100%; 
 
\t background:#ffffff; 
 
\t height:60px; 
 
\t line-height:60px; 
 
\t border-bottom:1px solid #dddddd; 
 
} 
 
.hamburger{ 
 
    background:none; 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    line-height:45px; 
 
    padding:5px 15px 0px 15px; 
 
    color:#999; 
 
    border:0; 
 
    font-size:1.4em; 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
    outline:none; 
 
    z-index:10000000000000; 
 
} 
 
.cross{ 
 
    background:none; 
 
    position:absolute; 
 
    top:0px; 
 
    right:0; 
 
    padding:7px 15px 0px 15px; 
 
    color:#999; 
 
    border:0; 
 
    font-size:3em; 
 
    line-height:65px; 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
    outline:none; 
 
    z-index:10000000000000; 
 
} 
 
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1; position:absolute; text-align:center; font-size:12px;} 
 
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;} 
 
.menu li {display: block; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;} 
 
.menu li:hover{display: block; background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;} 
 
.menu ul li a { text-decoration:none; margin: 0px; color:#666;} 
 
.menu ul li a:hover { color: #666; text-decoration:none;} 
 
.menu a{text-decoration:none; color:#666;} 
 
.menu a:hover{text-decoration:none; color:#666;} 
 

 
.glyphicon-home{ 
 
    color:white; 
 
    font-size:1.5em; 
 
    margin-top:5px; 
 
    margin:0 auto; 
 
} 
 
header{display:inline-block; font-size:12px;} 
 
span{padding-left:20px;} 
 
a{color:#336699;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<header> 
 
\t <span>Author : <a href="http://glennsmith.me" target="_blank">Glenn Smith</a></span> 
 
    <button class="hamburger">&#9776;</button> 
 
    <button class="cross">&#735;</button> 
 
</header> 
 

 
<div class="menu"> 
 
    <ul> 
 
    <a href="#"><li>LINK ONE</li></a> 
 
    <a href="#"><li>LINK TWO</li></a> 
 
    <a href="#"><li>LINK THREE</li></a> 
 
    <a href="#"><li>LINK FOUR</li></a> 
 
    <a href="#"><li>LINK FIVE</li></a> 
 
    </ul> 
 
</div>

Answer 3

あなたの要素を取得し、要素のスタイルを変更することにより、クリックリスナーとトグルを置きます。それはより速く、それは他のすべてのライブラリの中核にあるので、バニラを使う方が良いです。

var menu = document.getElementById('menu'); 
 

 
menu.addEventListener('click', function(x) { 
 

 
    x.target.style.display = 'none'; 
 

 
})

<div id="menu">menu</div>