Question

我使用Sidr插件作为侧面板，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

以编程方式打开/关闭
您可以使用一些方法根据需要打开或关闭菜单，或将它们绑定到任何事件。例如，在此页面中，右/左滑动触摸事件会打开或关闭响应式菜单（注意：此插件不实现触摸事件，在这种情况下我使用的是外部库）。

<强> 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 for your answer - http://jsfiddle.net/antonoff/0feug6g9/9/
参考 - http://www.berriart.com/sidr/#documentation
演示代码 - https://gist.github.com/artberri/6da9f659b77b028e3caa#file-programatically-sample-sidr-html

Answer 2

在这里，这个小提琴有效，

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

我对原始代码进行了一些修改。我所做的是：

在菜单中创建了一个关闭“close-sidr”类的关闭按钮。
我认为Sidr库附加了自己的类，因此修改后的类变为'sidr-class-close-sidr'。
然后我为关闭按钮创建了click事件，关闭了所有打开的侧面菜单。这个语法是$ .sidr（'close'，'menu name here'）;
```
$(document).on('click', '.sidr-class-close-sidr', function() {
  $.sidr('close', 'Edinburgh-menu');
  $.sidr('close', 'Glasgow-menu');
});
```

如何向jQuery推送侧面板添加关闭按钮

2 个答案: