前提・実現したいこと

jsで、クリックに応じてHTMLにCSSプロパティの追加と削除を行いたいのですが、
クリックで追加はできたのですが、プロパティの削除ができません。

該当のソースコード

jQuery
1$(function(){
2    var touch = false;
3    var scrollpos;
4
5    $('#hamburger').on('click',function(e){
6        scrollpos = $(window).scrollTop();
7        $('body').css({'margin-top': -scrollpos,'position': 'fixed'});
8    })
9});

https://www.prored-p.com/
こちらのサイトのハンバーガーメニューの部分の様に、
クリックに応じてbodyにCSSプロパティを追加・削除するには
どの様にしたらよろしいのでしょうか。

何か解決方法をご存知の方がいらっしゃいましたら、
お力をお貸しいただきたいです。

どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

クリック時にカスタムデータかなにかにフラグをたてておいて
フラグのありなしで削除と追加をいれかえるとかですかね

sample

たとえばこんな感じ

javascript
1<style>
2body{margin:0px;padding:0px}
3#hamburger{position:fixed;z-index:1;height:1.5em;background-Color:gray;width:100%;}
4#content{height:999px;margin-top:1.5em;position:absolute;};
5</style>
6
7<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
8<script>
9$(function(){
10    $('#hamburger').on('click',function(e){
11      var flg=$(this).data('flg')||false;
12      $(this).data('flg',!flg);
13      scrollpos = $(window).scrollTop();
14      if(flg){
15        $('#content').css({'margin-top': '','position': ''});
16      }else{
17        $('#content').css({'margin-top': -scrollpos,'position': 'fixed'});
18      }
19    })
20});
21</script>
22<div id="hamburger">hamburger</div>
23<div id="content">
241<br><br><br><br><br>
252<br><br><br><br><br>
263<br><br><br><br><br>
274<br><br><br><br><br>
285<br><br><br><br><br>
296<br><br><br><br><br>
307<br><br><br><br><br>
318<br><br><br><br><br>
329<br><br><br><br><br>
3310<br><br><br><br><br>
34</div>

投稿2019/08/27 09:28

編集2019/08/27 10:55

yambejp

総合スコア114784

Yui_note

2019/08/27 09:44

ありがとうございます。 > カスタムデータかなにかにフラグをたてておいてフラグのありなしで削除と追加をいれかえるすみません、フラグをたてるというのはどうゆうことでしょうか。。初心者マークをつけるのを忘れてしまいました、、申し訳ありません。よろしければ教えていただきたいです。よろしくお願いいたします。