我的 jQuery 函数互相破坏

Question

在我的 jquery 脚本文件中添加两个或更多函数时，function/s 停止工作。

当我只写了一个函数时，它工作得很好。但是当我添加第二个时，它们都停止工作了。

我添加了我的代码的 JSFiddle：http://jsfiddle.net/b966e9ae/

function accordion() {
 $('.content').accordion({active: 'false', collapsible: 'true'});
}

function slide() {
 $('#btnClick').click(function(){
  $('.box').toggle('slide', {direction: 'left', 1000});
 });
}

$(document).ready(function(){
 accordion();
 slide();
});

div.box {
 width: 200px;
 height: 200px;
 background-color: red;
}

button#btnClick {
 position: absolute;
 top: 200px;
 left: 500px;
}

h1 {
 background-color: #bbb;
 border: 1px solid #999;
 outline-color: #999;
}

<div class="content">
   <h1>Rubrik 1</h1>
   <div class="info">
    <p>Detta är lite info</p>
    <ul>
     <li>Info 1</li>
     <li>Info 2</li>
     <li>Info 3</li>
    </ul>
   </div>
   
   <h1>Rubrik 2</h1>
   <div class="info">
    <ul>
     <li>Sked</li>
     <li>2xTomater</li>
     <li>1xKryddmått</li>
    </ul>
   </div>
   
   <h1>Rubrik 3</h1>
   <div class="info">
    <p>Detta</p>
    <p>är</p>
    <p>Schysst!</p>
   </div>
   
   <h1>Rubrik 4</h1>
   <div class="info">
    <p>Detta</p>
    <p>är</p>
    <p>Schysst!</p>
   </div>
  </div>
  
  <div class="box">
   
  </div>
  
  <button id="btnClick">Click me</button>

Answer 1

这里有一个语法错误：

$('#btnClick').click(function(){
    $('.box').toggle('slide', {direction: 'left', 1000});
                                                ^                                                   
});

应该是：

$('#btnClick').click(function(){
    $('.box').toggle('slide', {
      direction: 'left'
    }, 1000);                                                    ^                                                   
});

Answer 2

$('.box').toggle('slide', {direction: 'left', 1000});

这是一个错误（检查你的控制台）。

必须是：

$('.box').toggle('slide', {direction: 'left'}, 1000);

Demo

我的 jQuery 函数互相破坏

My jQuery functions break each other

javascript

jquery

function