JSFiddle切换示例不起作用

Question

我正在尝试实现简单的JSfiddle示例:http://jsfiddle.net/HjJBZ/

但是,当我将它加载到我的网站(而不是JSFiddle!)时,它无法正常工作.我检查了控制台,似乎说:

未捕获的TypeError:无法读取属性'ready'的null(匿名函数)@ VM2075:1Xd @ g:108Ah @ g:176gh @ g:163(匿名函数)@ g:164(匿名函数)@ g:125(匿名函数) )@ g:101(匿名函数)@ g:20(匿名函数)@ 1025104082-3？mr = t1433769737&mi ='2.2082777797.1433755870147'&mt =!n&cs =!t

我的HTML代码是:

<style type="text/css">button#show2 {
  background-color: #323470;
  color: #fff;
  padding-top: 4%;
  padding-bottom: 4%;
  padding-left: 22%;
  padding-right: 22%;
}
#two {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 97%;
    height: 200px;
        background-color: #fff9d7;  
    border: 1px solid #e2c822;  
    color: #333333;  
    font-size: 13px;  
    font-weight: bold;  
    display: none;
    padding: 10px;
}
</style>
<button id="show2">Finance Available &gt;&gt;.</button>
<div id="two">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue libero. Nulla consequat leo malesuada condimentum rutrum. Vestibulum et mattis lacus. Nullam nec ex diam. Sed malesuada lorem quis tempus interdum. Nunc posuere ipsum vitae turpis luctus dapibus. Nam commodo efficitur justo, vitae gravida justo.</p>
</div>

我的JavaScript代码是:

 $('document').ready(function() {
    $('#show2').click(function() {
        $('#two').slideToggle();
    });
});

谢谢您的帮助

Answer 1

你需要使用$(document)没有引号.

目前你正在使用Element Selector ("element").由于我们没有document元素,因此您的代码不起作用.

$(document).ready(function() {
    $('#show2').click(function() {
        $('#two').slideToggle();
    });
});

button#show2 {
  background-color: #323470;
  color: #fff;
  padding-top: 4%;
  padding-bottom: 4%;
  padding-left: 22%;
  padding-right: 22%;
}
#two {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 97%;
  height: 200px;
  background-color: #fff9d7;
  border: 1px solid #e2c822;
  color: #333333;
  font-size: 13px;
  font-weight: bold;
  display: none;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="show2">Finance Available &gt;&gt;.</button>
<div id="two">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue libero. Nulla consequat leo malesuada condimentum rutrum. Vestibulum et mattis lacus. Nullam nec ex diam. Sed malesuada lorem quis tempus interdum. Nunc posuere ipsum vitae turpis
    luctus dapibus. Nam commodo efficitur justo, vitae gravida justo.</p>
</div>