###前提・実現したいこと
いつもお世話になっております。
「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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/18 01:30