Как добавить кнопку на 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. Затем я создал событие click для кнопок close, которое закрывает любое открытое меню. Синтаксис для этого - $ .sidr ('close', 'menu name here');

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

Answer 2

Открыть/Закрыть Programatically
Есть несколько методов, которые можно использовать, чтобы открыть или закрыть меню, как вы хотите, или привязать их к любому событию. Например, на этой странице справа или слева сенсорное событие открывает или закрывает чувствительное меню (Примечание: этот плагин не реализует события касания, в этом случае я использую внешнюю библиотеку).

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/
Reference - http://www.berriart.com/sidr/#documentation
Демо-код - https://gist.github.com/artberri/6da9f659b77b028e3caa#file-programatically-sample-sidr-html