如何在jquery中让文本读得更多/更少?

lkaoscv7  于 2023-11-17  发布在  jQuery
关注(0)|答案(4)|浏览(133)

我不知道也许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/[email protected]/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>
ndasle7k

ndasle7k1#

<!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/[email protected]/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/[email protected]/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>

字符串

drnojrws

drnojrws2#

在使用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>

bnlyeluc

bnlyeluc3#

<!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/[email protected]/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>

字符串

zour9fqk

zour9fqk4#

下面的代码可以帮助你。

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        .reveal-open {
        overflow: auto;
        height: auto;
        }
        .reveal-closed {
        overflow: hidden;
        height: 100px;
        }
        .label-rml{
        border: 1px solid;
        padding: 2px;
        margin: 5px 5px;
        background: cornflowerblue;
        color: white;
        }
    </style>
</head>
<body>
    <div id="thediv" class="reveal-closed">
        Contrary to popular belief, Lorem Ipsum is not simply random text. 
        It has roots in a piece of classical Latin literature from 45 BC, 
        making it over 2000 years old. Richard McClintock, a Latin professor 
        at Hampden-Sydney College in Virginia, looked up one of the more obscure 
        Latin words, consectetur, from a Lorem Ipsum passage, and going through 
        the cites of the word in classical literature, discovered the undoubtable 
        source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus 
        Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 
        45 BC. This book is a treatise on the theory of ethics, very popular during 
        the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", 
        comes from a line in section 1.10.32.
    </div>
    <label class="label-rml" id="roadmap">Read More...</label>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $("#roadmap").click(function() {
          $("#thediv").toggleClass("reveal-closed").toggleClass("reveal-open");
          if($(this).html()=='Read More...'){
            $(this).html('Read Less');
          }else{
            $(this).html('Read More...');
          }
        });
    </script>
</body>
</html>

字符串

相关问题