jQuery Toggle funktioniert nicht lokal und auf meiner Website, aber arbeitet an jsFiddle?

Question

Ich habe ein kleines Skript entwickelt, in dem Sie auf eine Schaltfläche klicken und ein Absatz wird mit dem Auswahlschalter ".toggle" in jQuery angezeigt. Allerdings funktioniert mein Code nur auf jsFiddle, aber nicht auf meiner lokalen Festplatte oder auf meiner Website?

Mein Code ist unten:

$(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 (Sie werden sehen, Hyper-Link "mehr/weniger lesen"

Danke

Answer 1

Sie haben Ihr click() Ereignis innerhalb der ready() Funktion zu setzen. (Wie @Rory McCrossan sagte auch)

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

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

Answer 2

.!

Sie zeigen nur die .main-paragraph. Verwenden Sie slideToggle für das gleiche. Auch die Klasse main-paragraph ist eine div und nicht p. Also, im Grunde wurde dein Code deswegen nicht ausgeführt.

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

Fügen Sie Ihren Click-Handler in Ihrem $(document).ready(function(){}):

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

Answer 4

Werfen Sie einen Blick

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