【jQuery】スマホメニューで表示非表示がうまくいきません。

###前提・実現したいこと
いつもお世話になっております。
「sidr」というプラグインで横から出てくるメニューを作成しています。

下記は、標準にはなくオリジナルで付加したいと思っているのですが、
メニューを開くと、「.layer」クラスを表示し、
メニューを閉じると、「.layer」クラスを非表示にしたいです。
閉じるときは、「body」全体クリック対象にし、
「.layer」クラスを非表示にしたいと考えています。

###発生している問題・エラーメッセージ
下記のようにすると、「body」をクリックすると「.layer」クラスを表示非表示されるだけになってしまいます。

Javascript
1	<script>
2  $(document).ready(function() {
3	  //標準-右からメニューを出す
4   $('a#right-menu').sidr({
5  	name: 'right-sidr',
6			side: 'right'
7   });
8	  //標準-bodyをクリックでメニューを閉じる
9     $('body').click(function() {
10     $.sidr('close', 'right-sidr');
11	
12   });
13//オリジナル
14   $('body').on('click', function() {
15  $('.layer').toggle();
16});
17   
18   });
19
20		
21</script>
22

html
1	<body>
2		<header>
3<p class="logo"><a href="/"><img src="../img/top/logo.png" alt=""></a></p>
4
5			
6			<!--▼メニューボタンを配置▼-->
7
8<a id="right-menu" href="#right-sidr"><span class="fa fa-navicon"></span>メニュー</a>
9<div id="right-sidr" >
10	<!-- ナビゲーションを<ul>タグで囲います。 -->
11	<ul>
12<li><a href="../">トップページ</a></li>
13
14	</ul>
15</div>
16</header>
17----本文----
18	<div class="layer"></div>
19</body>

css
1.layer {
2  display: none;
3    position: fixed;
4    top: 0;
5    right: 0;
6    bottom: 0;
7    left: 0;
8    background: rgba(0, 171, 234, 0.7);
9    z-index: 80;
10	 
11}

###試したこと
[body]ではなく[a#right-menu]と開くボタンを指定してみましたが、
[.layer]が表示されません。
[a#right-menu]という指定の仕方がおかしいのでしょうか。。。
宜しくお願いいたします。

Javascript
1	<script>
2  $(document).ready(function() {
3	  //標準-右からメニューを出す
4   $('a#right-menu').sidr({
5  	name: 'right-sidr',
6			side: 'right'
7   });
8	  //標準-bodyをクリックでメニューを閉じる
9     $('body').click(function() {
10     $.sidr('close', 'right-sidr');
11	
12   });
13//オリジナル
14   $('a#right-menu').on('click', function() {
15  $('.layer').toggle();
16});
17   
18   });
19
20		
21</script>
22

###教えていただき動作したコード

Javascript
1<script type="text/javascript">
2	$(document).ready(function() {
3	  //右からメニューを出す
4   $('#right-menu').sidr({
5  	name: 'right-sidr',
6			side: 'right',   
7	        //開く時に実行
8        onOpen: function(){
9          $('.layer').css('display','block');
10        },
11
12        //開いた後に実行
13        onOpenEnd: function(){
14        },
15        //閉じる時に実行
16        onClose: function(){
17
18              $('.layer').css('display','none');
19        },
20        //閉じた後に実行
21        onCloseEnd: function(){
22        }   
23   });
24	  //bodyをクリックでメニューを閉じる
25     $('body').click(function() {
26     $.sidr('close', 'right-sidr');
27	
28   });
29	});
30</script>

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

回答1件

ベストアンサー

イベントを設定できるようなので、そこで処理を追加すればよいのでは。

【Sidr - Berriart】
https://www.berriart.com/sidr/

onOpen (function) Default: function() {} [ Version 1.2.0 an above ]

onOpenEnd (function) Default: function() {} [ Version 2.1.0 an above ]
onClose (function) Default: function() {} [ Version 1.2.0 an above ]
onCloseEnd (function) Default: function() {} [ Version 2.1.0 an above ]

投稿2017/07/16 08:36