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

How to add a close button to jQuery push side panel

本文关键字：添加 关闭按钮 侧面 jQuery      更新时间：2023-09-26

我正在为侧板使用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/

这里，这个小提琴工作，

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

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

  1. 在两个菜单中都创建了一个类为"close-sidr"的关闭按钮
  2. 我认为Sidr库附加了自己的类，所以修改后的类变成了"Sidr-class-close-Sidr"

  3. 然后我为关闭按钮创建了点击事件，它关闭了任何打开的侧菜单。其语法为$.sidr（'close'，'menu-namehere'）；

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

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

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-用程序对sidr html 进行采样

相关文章：