Javascript jQuery滑动边栏面板插件中的问题

Javascript jQuery滑动边栏面板插件中的问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,jQuery滑动边栏面板插件不工作。我希望它只需单击一次即可打开,但需要单击3次按钮即可打开幻灯片面板。我在main.html页面中编写了以下代码 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="js/jq

jQuery滑动边栏面板插件不工作。我希望它只需单击一次即可打开,但需要单击3次按钮即可打开幻灯片面板。我在main.html页面中编写了以下代码

<html> <head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
   <script type="text/javascript" src="js/jquery.slidepanel.js"></script>

   <script type="text/javascript">
        $(document).ready(function(){
            $('[data-slidepanel]').slidepanel({
                 orientation: 'right',
                 mode: 'overlay'
            });
        });
    </script>
</head>

<body>
    <div class="divButton">
        <a href="slide.html" data-slidepanel="panel" ><button>Control Panel</button></a>
    </div>

</body> </html>

$(文档).ready(函数(){
$(“[data slidepanel]”)。slidepanel({
方向:'对',
模式:“覆盖”
});
});

同时添加以下文件

 <link rel="stylesheet" type="text/css" href="jquery.slidepanel.css">


我已经在第二个脚本中添加了上述样式表,但无论如何,我再次添加了样式表,但它不起作用。请将代码上传到JSFIDLE上并共享链接,好吗