jQuery Toggle не работает на локальном и на моем сайте, а работает на jsFiddle?

Question

Я разработал небольшой скрипт, в котором вы нажимаете кнопку, и абзац отображается с помощью селектора «.toggle» в jQuery. Однако мой код работает только на 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); 
    }); 
}); 

Answer 2

.!

Вы только что показываете .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 3

Включите ваш обработчик щелчка вашей $(document).ready(function(){}):

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