javascript - 我的 jQuery 函数互相破坏

Question

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

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

我添加了我的代码的 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);                                                    ^                                                   
});