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（您将看到 "read more/less" 超链接。

谢谢！

Answer 1

您只是在展示 .main-paragraph。同样使用 slideToggle。另外 class main-paragraph 是 div 而不是 p。因此，基本上您的代码因此没有执行。

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

$(".hide-button").click(function () {
    $(".main-paragraph").slideToggle(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>

Answer 2

在您的 $(document).ready(function(){}) 中包含您的点击处理程序：

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

Answer 3

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

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

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

Answer 4

看看

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


$(".hide-button").click(function () {

    $(".main-paragraph").slideToggle(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>

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

jQuery Toggle not working on local and on my website but working on jsFiddle?

html

javascript

css

jquery

toggle