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

您只是显示.main-paragraph。使用slideToggle表示相同的内容。此类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()事件置于<{1}}函数内。（正如@Rory McCrossan所说）

ready()

Answer 4

看看

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery切换不在本地和我的网站上工作，但在jsFiddle上工作？

4 个答案: