javascript - jQuery Toggle 无法在本地和我的网站上运行，但可以在 jsFiddle 上运行？

Question

我开发了一个小脚本，您可以在其中单击一个按钮，然后使用 jQuery 中的“.toggle”选择器显示一个段落。但是，我的代码只能在 jsFiddle 上运行，而不能在我的本地驱动器或我的网站上运行？

我的代码如下:

$(document).ready(function () {
    $(".main-paragraph").hide();
});

$(".hide-button").click(function () {
    $("p.main-paragraph").toggle(500);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
    Content Title
</h2>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis felis egestas tortor consequat aliquam id a nisl. Integer nisi tortor, luctus eget erat ac, lacinia tincidunt odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent non facilisis lectus. Aliquam pretium placerat elit. Vestibulum fermentum diam in magna placerat lobortis. Aliquam eu nisl ultrices, consectetur dolor eu, malesuada erat. <a href="#" class="hide-button">Read more/less</a>
</p>
<div class="main-paragraph">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis felis egestas tortor consequat aliquam id a nisl. Integer nisi tortor, luctus eget erat ac, lacinia tincidunt odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent non facilisis lectus. Aliquam pretium placerat elit. Vestibulum fermentum diam in magna placerat lobortis. Aliquam eu nisl ultrices, consectetur dolor eu, malesuada erat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis felis egestas tortor consequat aliquam id a nisl. Integer nisi tortor, luctus eget erat ac, lacinia tincidunt odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent non facilisis lectus. Aliquam pretium placerat elit. Vestibulum fermentum diam in magna placerat lobortis. Aliquam eu nisl ultrices, consectetur dolor eu, malesuada erat.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis felis egestas tortor consequat aliquam id a nisl. Integer nisi tortor, luctus eget erat ac, lacinia tincidunt odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent non facilisis lectus. Aliquam pretium placerat elit. Vestibulum fermentum diam in magna placerat lobortis. Aliquam eu nisl ultrices, consectetur dolor eu, malesuada erat.</p>
</div>

jsFiddle Link

Website (您将看到“阅读更多/更少”超链接。

谢谢!

Answer 1

您必须将您的click() 事件放在 ready() 函数中。 (正如@Rory McCrossan 所说)

$(document).ready(function () {
    $(".main-paragraph").hide();

    $(".hide-button").click(function () {
      $(".main-paragraph").toggle(500);
    });
});