javascript - JSFiddle 切换示例不起作用

Question

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

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

Uncaught TypeError: Cannot read property 'ready' of null(anonymous function) @ VM2075:1Xd @ g:108Ah @ g:176gh @ g:163(anonymous function) @ g:164(anonymous function) @ g:125(anonymous function) @ g:101(anonymous function) @ g:20(anonymous function) @ 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>