Q&A
＞ ボタンをクリックし.bodyクラス
#headermenu_btnはただのボタンですか？
前提・実現したいこと
jQueryについてです。
- ボタンをクリックし.bodyクラスへ、.activeクラスを追加
- クラスが.body.activeのとき<body></body>をクリックすると .activeを外す
発生している問題・エラーメッセージ
下記でなんとか実装は可能になったのですが、
もう少しわかりやすいというか、正確な書き方があれば
ご教授いただきたいです。
該当のソースコード
html
1<body ontouchstart="" class="body"> 2<header> 3 <div id="headermenu_btn" class="headermenu_btn"> 4 <span></span> 5 </div> 6</header> 7</body>
jQuery
1$(window).on('load',function(){ 2 $(function(){ 3 $('#headermenu_btn').on('click',function(e){ 4 $('.body').toggleClass('active'); //.active追加 5 }); 6 }); 7}); 8 9$(function(){ 10 $(document).on('click',function(e) { 11 if(!$(e.target).closest('#headermenu_btn').length) { 12 $('.body').removeClass('active'); //#headermenu_btn以外クリックで .active追加 13 } 14 }); 15});
試したこと
最初に書いたソースが下記になります。
でも、同時に処理されてしまい想定される動きになりません。
jquery
1$(window).on('load',function(){ 2 $(function(){ 3 $('#headermenu_btn').on('click',function(e){ 4 $('.body').toggleClass('active'); 5 }); 6 }); 7 $(function(){ 8 $('.body').on('click',function(e){ 9 if( $('.body').hasClass('active') ){ 10 $('.body').removeClass('active'); //これだと同時に処理されてしまう。 11 } 12 }); 13 }); 14});
よろしくお願いいたします。
回答1件
0
ベストアンサー
こういうことですかね？
javascript
1<style> 2body{height:100%;} 3.active{color:red} 4</style> 5<script> 6$(function(){ 7 $('#headermenu_btn').on('click',function(e){ 8 $('.body').addClass('active'); 9 e.stopPropagation(); 10 }); 11 $('body').on('click',function(e){ 12 $('.body').removeClass('active'); 13 }); 14}); 15</script> 16<body> 17<input type="button" id="headermenu_btn" value="headermenu_btn"> 18<div class="body">body1</div> 19<div class="body">body2</div> 20<div class="body">body3</div> 21</body>
投稿2019/12/12 01:43
総合スコア116694
あなたの回答
tips
プレビュー
