如何让文本在 jquery 中读取 more/less?
How to make text read more/less in jquery?
我不知道也许 jquery 不工作。错误在哪里?我想在点击时减少阅读更多类型的文本。当我单击“阅读更多”时,没有任何反应。如何解决?
$('.moreless-button').click(function() {
$('.moretext').slideToggle();
if ($('.moreless-button').text() == "Read more") {
$(this).text("Read less")
} else {
$(this).text("Read more")
}
});
.moretext {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--Bootstrap-5-->
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GEM HODLERS CRYPTO NEWS</title>
</head>
<body>
<!--Main-Content-->
<div class="container col-lg-12 text-center Main-Content">
<h1>#1 ON GOOGLE IN OUR CATEGORY</h1>
<img src="https://gemhodlers.com/wp-content/uploads/dSection3.jpg" class="img-fluid" />
<h2 class="imp-cap">
In current growth models, we are forecasting 1 million visitors per month by EOY 2022.<br /> (Screenshot taken 30 October 2021.)
</h2>
<img src="https://gemhodlers.com/wp-content/uploads/dSection4.jpg" alt="logo-picture " class="img-fluid top-logo" />
<h1>
Quick question: Is your team looking for cost-effective advertising & marketing solutions from a reputable name in the crypto space, that guarantees maximum visibility and attention from willing investors, that will help your project grow and reach its
maximum potential?
</h1>
<div class="moretext">
<h1 class="collec-text">
We are Gem Hodlers, a crypto-only news platform that gets heavy niche traffic from active and curious investors. We are also a full scale marketing agency. Through our platform, we offer different targeted marketing services, including various types of
advertising, project review articles and summaries, press releases, email outreach, platform highlights, social media promotion, and more, all through our platform.
</h1>
<h1 class="collec-text">
To summarize, we have our own crypto news platform that gets more than ¼ million visitors per month, that we currently offer various advertising and publications on, as well as other promotional material. We have ~6k email subscribers that we send weekly
newsletters to that we feature our sponsored projects in. We also offer an add-on service to send a dedicated email to all our subs giving them your project info with instructions on how they can involved, amongst other services to help you connect
with our highly niche audience.
</h1>
<h1>
We are able to do this because we do not rely on anyone else’s platform.
</h1>
<h1>
we connect you with those exact same investors that the websites above do, and stimulate the same growth, but for significantly less cost.
</h1>
<h1>
and we've recently been getting a noticeably increasing amount of Polygon, Solana, Fantom, and Avalanche network traffic.
</h1>
<h1>
If your team is paying for space on our platform, for any length of time, then it is fully yours, and all visitors will see it for the duration.
</h1>
<h1>
We offer actual advertising and real-life marketing that leads to our client’s projects having higher valuations with more investors, and we offer our services to projects we have good reason to believe our audience would be interested in investing their
hard-earned money into.
</h1>
<h1>
Having all of that said… thank you for your time, and welcome to the World of Gem Hodlers!
</h1>
</div>
<a class="moreless-button" href="#">Read more</a>
<h2 class="bottom-text">The Gem Hodlers team</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--Bootstrap-5-->
<!-- Latest compiled and minified CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<!-- Latest compiled JavaScript -->
<style>
.moretext {
display: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GEM HODLERS CRYPTO NEWS</title>
</head>
<body>
<!--Main-Content-->
<div class="container col-lg-12 text-center Main-Content">
<h1>#1 ON GOOGLE IN OUR CATEGORY</h1>
<img
src="https://gemhodlers.com/wp-content/uploads/dSection3.jpg"
class="img-fluid"
/>
<h2 class="imp-cap">
In current growth models, we are forecasting 1 million visitors per
month by EOY 2022.<br />
(Screenshot taken 30 October 2021.)
</h2>
<img
src="https://gemhodlers.com/wp-content/uploads/dSection4.jpg"
alt="logo-picture "
class="img-fluid top-logo"
/>
<h1 >
Quick question: Is your team looking for cost-effective advertising &
marketing solutions from a reputable name in the crypto space, that
guarantees maximum visibility and attention from willing investors, that
will help your project grow and reach its maximum potential?
</h1>
<div class="moretext">
<h1 class="collec-text">
We are Gem Hodlers, a crypto-only news platform that gets heavy niche
traffic from active and curious investors. We are also a full scale
marketing agency. Through our platform, we offer different targeted
marketing services, including various types of advertising, project
review articles and summaries, press releases, email outreach, platform
highlights, social media promotion, and more, all through our platform.
</h1>
<h1 class="collec-text">
To summarize, we have our own crypto news platform that gets more than ¼
million visitors per month, that we currently offer various advertising
and publications on, as well as other promotional material. We have ~6k
email subscribers that we send weekly newsletters to that we feature our
sponsored projects in. We also offer an add-on service to send a
dedicated email to all our subs giving them your project info with
instructions on how they can involved, amongst other services to help
you connect with our highly niche audience.
</h1>
<h1 >
We are able to
do this because we do not rely on anyone else’s platform.
</h1>
<h1 >
we connect you with those exact same investors that the
websites above do, and stimulate the same growth, but for significantly
less cost.
</h1>
<h1 >
and we've
recently been getting a noticeably increasing amount of Polygon, Solana,
Fantom, and Avalanche network traffic.
</h1>
<h1 >
If your team is paying for space on our platform,
for any length of time, then it is fully yours, and all visitors will
see it for the duration.
</h1>
<h1 >
We offer
actual advertising and real-life marketing that leads to our client’s
projects having higher valuations with more investors, and we offer our
services to projects we have good reason to believe our audience would
be interested in investing their hard-earned money into.
</h1>
<h1 >
Having all of that said… thank you for your time, and welcome to the
World of Gem Hodlers!
</h1>
</div>
<a class="moreless-button" href="#">Read more</a>
<h2 class="bottom-text">The Gem Hodlers team</h2>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$('.moreless-button').click(function() {
$('.moretext').slideToggle();
if ($('.moreless-button').text() == "Read more") {
$(this).text("Read less")
} else {
$(this).text("Read more")
}
});
</script>
</body>
</html>
您需要在使用前参考 jQuery 文件。
这可以通过从 here 下载源文件并添加
来完成
<script src="jquery-3.x.x.min.js"></script>
或者更方便简单的方法是使用 CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--Bootstrap-5-->
<!-- Latest compiled and minified CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<style>
.moretext {
display: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GEM HODLERS CRYPTO NEWS</title>
</head>
<body>
<!--Main-Content-->
<div class="container col-lg-12 text-center Main-Content">
<h1>#1 ON GOOGLE IN OUR CATEGORY</h1>
<img
src="https://gemhodlers.com/wp-content/uploads/dSection3.jpg"
class="img-fluid"
/>
<h2 class="imp-cap">
In current growth models, we are forecasting 1 million visitors per
month by EOY 2022.<br />
(Screenshot taken 30 October 2021.)
</h2>
<img
src="https://gemhodlers.com/wp-content/uploads/dSection4.jpg"
alt="logo-picture "
class="img-fluid top-logo"
/>
<h1 >
Quick question: Is your team looking for cost-effective advertising &
marketing solutions from a reputable name in the crypto space, that
guarantees maximum visibility and attention from willing investors, that
will help your project grow and reach its maximum potential?
</h1>
<div class="moretext">
<h1 class="collec-text">
We are Gem Hodlers, a crypto-only news platform that gets heavy niche
traffic from active and curious investors. We are also a full scale
marketing agency. Through our platform, we offer different targeted
marketing services, including various types of advertising, project
review articles and summaries, press releases, email outreach, platform
highlights, social media promotion, and more, all through our platform.
</h1>
<h1 class="collec-text">
To summarize, we have our own crypto news platform that gets more than ¼
million visitors per month, that we currently offer various advertising
and publications on, as well as other promotional material. We have ~6k
email subscribers that we send weekly newsletters to that we feature our
sponsored projects in. We also offer an add-on service to send a
dedicated email to all our subs giving them your project info with
instructions on how they can involved, amongst other services to help
you connect with our highly niche audience.
</h1>
<h1 >
We are able to
do this because we do not rely on anyone else’s platform.
</h1>
<h1 >
we connect you with those exact same investors that the
websites above do, and stimulate the same growth, but for significantly
less cost.
</h1>
<h1 >
and we've
recently been getting a noticeably increasing amount of Polygon, Solana,
Fantom, and Avalanche network traffic.
</h1>
<h1 >
If your team is paying for space on our platform,
for any length of time, then it is fully yours, and all visitors will
see it for the duration.
</h1>
<h1 >
We offer
actual advertising and real-life marketing that leads to our client’s
projects having higher valuations with more investors, and we offer our
services to projects we have good reason to believe our audience would
be interested in investing their hard-earned money into.
</h1>
<h1 >
Having all of that said… thank you for your time, and welcome to the
World of Gem Hodlers!
</h1>
</div>
<a class="moreless-button" href="#">Read more</a>
<h2 class="bottom-text">The Gem Hodlers team</h2>
<script>
$('.moreless-button').click(function() {
$('.moretext').slideToggle();
if ($('.moreless-button').text() == "Read more") {
$(this).text("Read less")
document.querySelector('.moretext').style.display = 'block';
} else {
$(this).text("Read more")
document.querySelector('.moretext').style.display = 'none';
}
});
</script>
</body>
</html>
我不知道也许 jquery 不工作。错误在哪里?我想在点击时减少阅读更多类型的文本。当我单击“阅读更多”时,没有任何反应。如何解决?
$('.moreless-button').click(function() {
$('.moretext').slideToggle();
if ($('.moreless-button').text() == "Read more") {
$(this).text("Read less")
} else {
$(this).text("Read more")
}
});
.moretext {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--Bootstrap-5-->
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GEM HODLERS CRYPTO NEWS</title>
</head>
<body>
<!--Main-Content-->
<div class="container col-lg-12 text-center Main-Content">
<h1>#1 ON GOOGLE IN OUR CATEGORY</h1>
<img src="https://gemhodlers.com/wp-content/uploads/dSection3.jpg" class="img-fluid" />
<h2 class="imp-cap">
In current growth models, we are forecasting 1 million visitors per month by EOY 2022.<br /> (Screenshot taken 30 October 2021.)
</h2>
<img src="https://gemhodlers.com/wp-content/uploads/dSection4.jpg" alt="logo-picture " class="img-fluid top-logo" />
<h1>
Quick question: Is your team looking for cost-effective advertising & marketing solutions from a reputable name in the crypto space, that guarantees maximum visibility and attention from willing investors, that will help your project grow and reach its
maximum potential?
</h1>
<div class="moretext">
<h1 class="collec-text">
We are Gem Hodlers, a crypto-only news platform that gets heavy niche traffic from active and curious investors. We are also a full scale marketing agency. Through our platform, we offer different targeted marketing services, including various types of
advertising, project review articles and summaries, press releases, email outreach, platform highlights, social media promotion, and more, all through our platform.
</h1>
<h1 class="collec-text">
To summarize, we have our own crypto news platform that gets more than ¼ million visitors per month, that we currently offer various advertising and publications on, as well as other promotional material. We have ~6k email subscribers that we send weekly
newsletters to that we feature our sponsored projects in. We also offer an add-on service to send a dedicated email to all our subs giving them your project info with instructions on how they can involved, amongst other services to help you connect
with our highly niche audience.
</h1>
<h1>
We are able to do this because we do not rely on anyone else’s platform.
</h1>
<h1>
we connect you with those exact same investors that the websites above do, and stimulate the same growth, but for significantly less cost.
</h1>
<h1>
and we've recently been getting a noticeably increasing amount of Polygon, Solana, Fantom, and Avalanche network traffic.
</h1>
<h1>
If your team is paying for space on our platform, for any length of time, then it is fully yours, and all visitors will see it for the duration.
</h1>
<h1>
We offer actual advertising and real-life marketing that leads to our client’s projects having higher valuations with more investors, and we offer our services to projects we have good reason to believe our audience would be interested in investing their
hard-earned money into.
</h1>
<h1>
Having all of that said… thank you for your time, and welcome to the World of Gem Hodlers!
</h1>
</div>
<a class="moreless-button" href="#">Read more</a>
<h2 class="bottom-text">The Gem Hodlers team</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--Bootstrap-5-->
<!-- Latest compiled and minified CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<!-- Latest compiled JavaScript -->
<style>
.moretext {
display: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GEM HODLERS CRYPTO NEWS</title>
</head>
<body>
<!--Main-Content-->
<div class="container col-lg-12 text-center Main-Content">
<h1>#1 ON GOOGLE IN OUR CATEGORY</h1>
<img
src="https://gemhodlers.com/wp-content/uploads/dSection3.jpg"
class="img-fluid"
/>
<h2 class="imp-cap">
In current growth models, we are forecasting 1 million visitors per
month by EOY 2022.<br />
(Screenshot taken 30 October 2021.)
</h2>
<img
src="https://gemhodlers.com/wp-content/uploads/dSection4.jpg"
alt="logo-picture "
class="img-fluid top-logo"
/>
<h1 >
Quick question: Is your team looking for cost-effective advertising &
marketing solutions from a reputable name in the crypto space, that
guarantees maximum visibility and attention from willing investors, that
will help your project grow and reach its maximum potential?
</h1>
<div class="moretext">
<h1 class="collec-text">
We are Gem Hodlers, a crypto-only news platform that gets heavy niche
traffic from active and curious investors. We are also a full scale
marketing agency. Through our platform, we offer different targeted
marketing services, including various types of advertising, project
review articles and summaries, press releases, email outreach, platform
highlights, social media promotion, and more, all through our platform.
</h1>
<h1 class="collec-text">
To summarize, we have our own crypto news platform that gets more than ¼
million visitors per month, that we currently offer various advertising
and publications on, as well as other promotional material. We have ~6k
email subscribers that we send weekly newsletters to that we feature our
sponsored projects in. We also offer an add-on service to send a
dedicated email to all our subs giving them your project info with
instructions on how they can involved, amongst other services to help
you connect with our highly niche audience.
</h1>
<h1 >
We are able to
do this because we do not rely on anyone else’s platform.
</h1>
<h1 >
we connect you with those exact same investors that the
websites above do, and stimulate the same growth, but for significantly
less cost.
</h1>
<h1 >
and we've
recently been getting a noticeably increasing amount of Polygon, Solana,
Fantom, and Avalanche network traffic.
</h1>
<h1 >
If your team is paying for space on our platform,
for any length of time, then it is fully yours, and all visitors will
see it for the duration.
</h1>
<h1 >
We offer
actual advertising and real-life marketing that leads to our client’s
projects having higher valuations with more investors, and we offer our
services to projects we have good reason to believe our audience would
be interested in investing their hard-earned money into.
</h1>
<h1 >
Having all of that said… thank you for your time, and welcome to the
World of Gem Hodlers!
</h1>
</div>
<a class="moreless-button" href="#">Read more</a>
<h2 class="bottom-text">The Gem Hodlers team</h2>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$('.moreless-button').click(function() {
$('.moretext').slideToggle();
if ($('.moreless-button').text() == "Read more") {
$(this).text("Read less")
} else {
$(this).text("Read more")
}
});
</script>
</body>
</html>
您需要在使用前参考 jQuery 文件。
这可以通过从 here 下载源文件并添加
来完成<script src="jquery-3.x.x.min.js"></script>
或者更方便简单的方法是使用 CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--Bootstrap-5-->
<!-- Latest compiled and minified CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<style>
.moretext {
display: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GEM HODLERS CRYPTO NEWS</title>
</head>
<body>
<!--Main-Content-->
<div class="container col-lg-12 text-center Main-Content">
<h1>#1 ON GOOGLE IN OUR CATEGORY</h1>
<img
src="https://gemhodlers.com/wp-content/uploads/dSection3.jpg"
class="img-fluid"
/>
<h2 class="imp-cap">
In current growth models, we are forecasting 1 million visitors per
month by EOY 2022.<br />
(Screenshot taken 30 October 2021.)
</h2>
<img
src="https://gemhodlers.com/wp-content/uploads/dSection4.jpg"
alt="logo-picture "
class="img-fluid top-logo"
/>
<h1 >
Quick question: Is your team looking for cost-effective advertising &
marketing solutions from a reputable name in the crypto space, that
guarantees maximum visibility and attention from willing investors, that
will help your project grow and reach its maximum potential?
</h1>
<div class="moretext">
<h1 class="collec-text">
We are Gem Hodlers, a crypto-only news platform that gets heavy niche
traffic from active and curious investors. We are also a full scale
marketing agency. Through our platform, we offer different targeted
marketing services, including various types of advertising, project
review articles and summaries, press releases, email outreach, platform
highlights, social media promotion, and more, all through our platform.
</h1>
<h1 class="collec-text">
To summarize, we have our own crypto news platform that gets more than ¼
million visitors per month, that we currently offer various advertising
and publications on, as well as other promotional material. We have ~6k
email subscribers that we send weekly newsletters to that we feature our
sponsored projects in. We also offer an add-on service to send a
dedicated email to all our subs giving them your project info with
instructions on how they can involved, amongst other services to help
you connect with our highly niche audience.
</h1>
<h1 >
We are able to
do this because we do not rely on anyone else’s platform.
</h1>
<h1 >
we connect you with those exact same investors that the
websites above do, and stimulate the same growth, but for significantly
less cost.
</h1>
<h1 >
and we've
recently been getting a noticeably increasing amount of Polygon, Solana,
Fantom, and Avalanche network traffic.
</h1>
<h1 >
If your team is paying for space on our platform,
for any length of time, then it is fully yours, and all visitors will
see it for the duration.
</h1>
<h1 >
We offer
actual advertising and real-life marketing that leads to our client’s
projects having higher valuations with more investors, and we offer our
services to projects we have good reason to believe our audience would
be interested in investing their hard-earned money into.
</h1>
<h1 >
Having all of that said… thank you for your time, and welcome to the
World of Gem Hodlers!
</h1>
</div>
<a class="moreless-button" href="#">Read more</a>
<h2 class="bottom-text">The Gem Hodlers team</h2>
<script>
$('.moreless-button').click(function() {
$('.moretext').slideToggle();
if ($('.moreless-button').text() == "Read more") {
$(this).text("Read less")
document.querySelector('.moretext').style.display = 'block';
} else {
$(this).text("Read more")
document.querySelector('.moretext').style.display = 'none';
}
});
</script>
</body>
</html>