当单击第一个Read more按钮时，它可以工作，但是Read less不显示，但是即使单击其余的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>
答案 0 :(得分：0)
由于您的代码不完整，但我认为您想这样做
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');
});
});
答案 1 :(得分：0)
在告诉您问题是什么之前，让我给您一些提示，我认为它们将帮助您使用代码：
1。还有额外的HTML标签：
正确的代码缩进和格式设置将帮助您避免此类错误：
<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> <------ Extra p tag
</div>
2。避免在JavaScript属性中使用HTML：
这将增加另一层复杂性，并且您的代码更容易出错，因为如果删除一个函数，则需要从HTML代码中删除它，而linter不会对此发出警告。
3。与其将display属性添加到JavaScript中，不如使用类并添加或删除它们：
如果不需要支持Internet Explorer 9，则可以使用Element.classList属性在元素中添加或删除类。在最后一个代码段中，您将看到一个使用示例。
4。请勿将同一id添加到多个元素：
Ids在页面中是唯一的，如果您需要访问多个元素，请改用class。
5。而您的主要问题是这个：
由于ids在页面中应该是唯一的，因此document.getElementById将返回DOM中带有该id的第一个元素。因此，您的函数尝试使用ids dots和more仅显示和隐藏文档中的前几个元素。
在这里，您可以使用以前的建议编写代码：
var services = document.querySelector('#services');
services.addEventListener('click', function(e) {
var target = e.target;
if (target.classList.contains('btn')) {
var serviceItem = target.parentNode;
var open = target.dataset.open === 'true';
target.dataset.open = !open;
if (open) {
target.innerText = 'Read more';
serviceItem.classList.remove('open');
} else {
target.innerText = 'Read less';
serviceItem.classList.add('open');
}
}
});.more {
display: none;
}
.service-item.open .more {
display: inline;
}
.service-item.open .dots {
display: none;
}<!-- 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>
</div>
<div class="section-content-holder">
<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 class="dots">...</span><span class="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 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 class="dots">...</span><span class="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>
</p>
<button 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 class="dots">...</span><span class="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>
</p>
<button id="myBtn3" class="btn">Read More</button>
</div>
</div>
</div>
</div>