如何關閉按鈕添加到jQuery的推動側板

Question

我使用的錫德插件的側面板，HTML的示例：

 <ul> 
     <li><a href="#" id="edinburgh-menu">One</a></li> 
     <li><a href="#" id="glasgow-menu">Two</a></li> 
     </ul> 

     <div id="edinburgh-div" style="display:none;"> 
     this is content 
     </div> 

     <div id="glasgow-div" style="display:none;"> 
     this is content 
     </div> 

jQuery的如下：

$(document).ready(function() { 
$('#edinburgh-menu').sidr({name: 'Edinburgh-menu',source: '#edinburgh-div'});  
$('#glasgow-menu').sidr({name: 'Glasgow-menu',source: '#glasgow-div'});}); 

這使得側面板打開。

如何在兩個面板內添加一個按鈕/鏈接，使其關閉？

http://jsfiddle.net/0feug6g9/

Answer 1

這裏，這個小提琴作品，

http://jsfiddle.net/0feug6g9/7/

我做了一些修改原密碼。我所做的是：

1. 在菜單中創建了一個類'close-sidr'的關閉按鈕。
2. Sidr庫追加自己的類我想，所以修改後的類變成'sidr-class-close-sidr'。

3. 然後我創建了關閉按鈕的點擊事件，關閉任何打開的菜單。這個語法是$ .sidr（'close'，'menu name here'）;

   $(document).on('click', '.sidr-class-close-sidr', function() { 
       $.sidr('close', 'Edinburgh-menu'); 
       $.sidr('close', 'Glasgow-menu'); 
   }); 
   

Answer 2

打開/關閉編程方式
有一些方法，只要你想，你可以用它來打開或關閉菜單，或將其綁定到任何事件。例如，在此頁面中，右/左滑動觸摸事件將打開或關閉響應菜單（注意：此插件不會實現觸摸事件，在這種情況下，我正在使用外部庫）。

HTML：

<ul> 
    <li><a href="#" id="edinburgh-menu">Open</a></li> 
    <li><a href="#" id="close-sidr-menu">Close [x]</a></li> 
</ul> 
<div id="edinburgh-div" style="display:none;"> 
    <p>Your content here.</p> 
</div> 

JS：

$(document).ready(function() { 
    $('#edinburgh-menu').sidr({name: 'Edinburgh-menu',source: '#edinburgh-div'}); 
    $(document).on('click', '#close-sidr-menu', function() { 
     $.sidr('close', 'Edinburgh-menu'); 
     $.sidr('close', 'Glasgow-menu'); 
    }); 
}); 

的jsfiddle你的答案 - http://jsfiddle.net/antonoff/0feug6g9/9/
參考 - http://www.berriart.com/sidr/#documentation
演示代碼 - https://gist.github.com/artberri/6da9f659b77b028e3caa#file-programatically-sample-sidr-html