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> 

Answer 2

通過從$('document')刪除引號來嘗試這一點，否則它將在您使用selector元素時搜索<document>元素：

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

JSFIDDLE DEMO

Answer 3

$（'document'）選擇器不正確。 嘗試$（文檔），我測試了下面的，它工作正常

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