javascript - JavaScript 中的多个阅读更多/更少按钮

Question

当点击第一个 Read more 按钮时它可以工作但是 Read less 没有出现，但是即使点击 rest Read more 仍然第一个有效。

function myFunction(id) {
  alert(id);
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  if (dots.style.display === "none") {
    dots.style.display = "inline";
    id.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    id.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

<!-- Services Section -->
<div id="services" class="section page-split">
  <div class="section-wrapper block content-1170 center-relative">
    <div class="bg-holder float-left">
      <img src="images/left_obj_01.png" alt="">
    </div>
    <div class="section-title-holder float-left" data-background="#a13dd7">
      <div class="section-num">
        <span class="current-section-num">
          01
        </span>
        <span class="total-section-num">
          / 04
        </span>
      </div>
      <h2 class="entry-title">
        Services
      </h2>
      <p class="page-desc">
        Permanence of the stars hundreds of thousands
      </p>
    </div>
    </p>
  </div>
  <div class="section-content-holder float-right" style="margin-bottom: 30px;">
    <div class="content-wrapper">
      <div class="one_third animate wait-07s">
        <div class="service-item">
          <img class="service-icon" src="images/webdesign.png" alt="">
          <p class="service-title"><strong>Web Designing Services</strong></p>
          <p>
            Our Web Design Team consists of Professionals who have been designing websites for decades. With a wealth of experience and knowledge, we aim to provide.our clients with engaging interactive .
            <span id="dots">...</span>
            <span id="more">
              lightning .and speed websites.Our Web Design Services in Portland, USA will surely improve your website ranking as well as traffic.Contact us today for a free consultation.
            </span>
          </p>
          <button onclick="myFunction(this.id);" id="myBtn1" class="btn">Read More</button>
        </div>
      </div>
    </div>
    <div class="one_third animate wait-05s">
      <div class="service-item">
        <img class="service-icon" src="images/webdev.png" alt="">
        <p class="service-title"><strong>Web Development Services</strong></p>
        <p>
          Searching for quality Web Development Services in Portland, USA? If yes, then are experts are here to offer you the best web development services.
          <span id="dots">...</span>
          <span id="more">
            Our team consists of skilled and experienced full stack designers and developers. We have the expertise to provide high-end web solutions. Each and every website developed by us is tailored as per the requirements of your business and also as per the requirements in the market.
          </span>
          </span>
        </p>
        <button onclick="myFunction(this.id);" id="myBtn2" class="btn">Read More</button>
      </div>
    </div>
    <div class="one_third last animate wait-04s">
      <div class="service-item">
        <img class="service-icon" src="images/ecomm.png" alt="">
        <p class="service-title"><strong>E-commerce Website Development</strong></p>
        <p>
          Codevelop has been operating in the digital marketing sector for several years.We have been fortunate enough to have worked with several clients..
          <span id="dots">...</span>
          <span id="more">
            from all around the world who are now successfully commencing business in the Ecommerce world..The primary objective of our company is to meet all your Ecommerce website development requirements so that you can attract more customers and simultaneously maximize your sales in the long run.Codevelop is the best Ecommerce website developer in all of Portland, USA as our company now aims to give you the best possible digital marketing solutions at affordable pricing points.
            </span>
          </span>
        </p>
        <button onclick="myFunction(this.id);" id="myBtn3" class="btn">Read More</button>
      </div>
    </div>
    <div class="clear"></div>
    <div class="one_third animate wait-07s">
      <div class="service-item">
        <img class="service-icon" src="images/file.png" alt="">
        <p class="service-title"><strong>Graphic Designing</strong></p>
        <p>Build a stronger brand with the help of our Graphic Designing Services
          <span class="para4" style="display:none;">
            With the ever-growing demand in the digital world, the level of competition is also increasing at
a rate of knots. Therefore, companies must rely on impressive graphic designs in order to
attract the attention of the target audience. Avail the services of Codevelop today and build a
competitive advantage in favor of your brand within your target market.
Our team of experts possesses the skills to meet all your requirements. Complete customer
satisfaction is the sole objective of our company and we aim to achieve it at any cost.
          </span>
          </span>
        </p>
        <button onclick="myFunction(this.id);" id="myBtn4" class="btn">Read More</button>
      </div>
    </div>
    <div class="one_third animate wait-05s">
      <div class="service-item">
        <img class="service-icon" src="images/seo.png" alt="">
        <p class="service-title"><strong>SEO Services</strong></p>
        <p>
          Dominate all Search Engine Platforms by joining hands with Codevelop. Search
          <span class="para5" style="display:none;">Engine Optimization or SEO is perhaps the most powerful tool that exists in the digital
world today. If SEO strategies are correctly applied,
          </span>
          </span>
        </p>
        <button onclick="myFunction(this.id);" id="myBtn5" class="btn">Read More</button>
      </div>
    </div>
    <div class="one_third last animate wait-04s">
      <div class="service-item">
        <img class="service-icon" src="images/wordpress.png" alt="">
        <p class="service-title"><strong>Word Press Services</strong></p>
        <p>
          Want more stability for your business? Hire the experts at Codevelop. In order to
          <span class="para6" style="display:none;">
            be relevant in the present market, it is essential that you have a website that is user-friendly, easily accessible, and can be adequately navigated. All these aspects and more can be achieved with the help of our services. Here at Codevelop, we possess a dedicated team of individuals who specialize in various fields of study. This is precisely why we are able to cater to the various digital marketing needs of our customers.
          </span>
          </span>
        </p>
        <button onclick="myFunction(this.id);" id="myBtn6" class="btn">Read more</button>
      </div>
    </div>
  </div>
</div>

Answer 1

因为你的代码不完整，但我认为你想这样做

HTML

    <div class="well">
    <h3><a href="#">Market Research, Analysis, and Strategy Consultant</a></h3>

    <!-- Replace the 'height' below as you want -->
    <p class="lead" height="36">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam purus, lacinia eget placerat sit amet, bibendum nec nisl. Curabitur a mattis ipsum. Praesent quis nisi in purus malesuada rhoncus. Pellentesque ut quam eget libero congue lobortis. Nunc sed quam ac erat lobortis eleifend. Donec elementum sodales cursus. Aliquam porttitor massa nisi, in laoreet turpis. Sed consequat condimentum lorem ut dignissim. Sed hendrerit mauris ut massa fermentum laoreet. Pellentesque a leo vitae enim dictum lobortis. Praesent commodo feugiat velit iaculis malesuada.</p>

    <div class="more more-lead">More...</div>
</div>
<div class="well">
    <h3><a href="#">Market Research, Analysis, and Strategy Consultant 2</a></h3>

    <!-- Replace the 'height' below as you want -->
    <p class="lead" height="36">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam purus, lacinia eget placerat sit amet, bibendum nec nisl. Curabitur a mattis ipsum. Praesent quis nisi in purus malesuada rhoncus. Pellentesque ut quam eget libero congue lobortis. Nunc sed quam ac erat lobortis eleifend. Donec elementum sodales cursus. Aliquam porttitor massa nisi, in laoreet turpis. Sed consequat condimentum lorem ut dignissim. Sed hendrerit mauris ut massa fermentum laoreet. Pellentesque a leo vitae enim dictum lobortis. Praesent commodo feugiat velit iaculis malesuada.</p>

    <div class="more more-lead">More...</div>
</div>

CSS

.lead {float:left; width:100%; overflow:hidden; background-color:#66FF00;}
.more {cursor:pointer;}

JS

 jQuery(function($){

    // Resize Height
    function reh(e) {
        $(e).css({'height':$(e).attr('height')})
    }

    // Empty Height
    function emh(e) {
        $(e).css({'height':'auto'});
    }

    // Resize .lead (default height)
    reh('.lead');

    // Actions
    // More: Lead
    $('body').on('click', '.more-lead', function(){
        emh($(this).siblings('.lead'));
        $(this).html('Less...').addClass('less-lead').removeClass('more-lead');
    });

    // Less: Lead
    $('body').on('click', '.less-lead', function(){
        reh($(this).siblings('.lead'));
        $(this).html('More...').addClass('more-lead').removeClass('less-lead');
    });

});