添加查看更多/查看更少按钮自定义

1 阅读 0 评论 0 点赞

我想添加一个自定义的查看更多/查看更少的按钮：自定义是一个加号 (+) 图标，如下图所示。我能够使用以下代码执行此操作：

function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");

if (dots.style.display === "none") {
	dots.style.display = "inline";
	btnText.innerHTML = "See more here"; 
	moreText.style.display = "none";
} else {
	dots.style.display = "none";
	btnText.innerHTML = "See less"; 
	moreText.style.display = "inline";
}
}

/*read more button*/
#more {
display: none;
}

.fa-plus-circle {
font-size: 40px;
float: left;
margin: 5px;
vertical-align: super;
color: #a41a3c;
}

.fa-plus-circle:before {
content: "\f055";
}

#myBtn {
background-color: #fff;
border: none;
width: 13%;
}

#myBtn h4 {
font-size: 13px;
margin: 17px 0 0 0;
}

<span id="dots"></span>
<div id="more" style="margin-bottom:20px;" class="col-xs-12">
<!-- here are the hidden <div> -->
<div class="row" style="text-align: center;">
	<button onclick="myFunction()" id="myBtn">
		<i class="fa fa-plus-circle"></i>
		<h4>See more here</h4>
	</button>
</div>
</div>

展开片段

问题是当我单击按钮时，按钮的样式消失，图标以及下图：我想保留按钮的样式，并用减号 (-) 图标更改图标。

有人可以帮我解决这种情况吗？

我看到的问题基本上是因为你的代码中有更多的 div，因为其他所有东西都是作为孩子放在它里面的，所以当更多的显示没有显示时，你看不到应用的样式。我认为你应该避免改变更多的样式div 然后看看发生了什么

我认为btnText.innerHTML函数中的位置颠倒了。此外，您忘记寻找h4，您正在替换#myBtn.

注意：添加 css 类比更改样式更好。

尝试

function myFunction() {

 var dots = document.getElementById("dots");
 var btnText = document.querySelector("#myBtn h4"); 

 if (dots.classList.contains("hidden")) {

   dots.classList.remove("hidden");
   btnText.innerHTML = "See less"; 
 } else {
   dots.classList.add("hidden");
   btnText.innerHTML = "See more here"; 
 }
}

/*read more button*/

.hidden {
   display: none;
}

.centering {
   text-align: center;
}

.bottom_spacer {
   margin-bottom:20px;
}

.fa-plus-circle {
   font-size: 40px;
   float: left;
   margin: 5px;
   vertical-align: super;
   color: #a41a3c;
}

.fa-plus-circle:before {
   content: "\f055";
}

#myBtn {
   background-color: #fff;
   border: none;
   width: 13%;
}

#myBtn h4 {
   font-size: 13px;
   margin: 17px 0 0 0;
   white-space: nowrap
}

<span id="dots" class="hidden">(+) something  (+) somethingelse</span>
<div id="more" class="col-xs-12 bottom_spacer">
 <div class="row centering">
  <button onclick="myFunction()" id="myBtn">
   <i class="fa fa-plus-circle"></i>
   <h4>See more here</h4>
  </button>
 </div>
</div>

展开片段

thank you very much for your answer. The function works properly. However I have an other concern: the icon is still the + icon when I would like the - icon when this is 'see less' button. How can I change it? Thank you again for your time and support.

@AlexandreDeplancke Use one css class to specify a background (+) image or another for a (-) image.

I understand the way to create 2 different CSS class. However I don't know how to write the code correctly as I am not a good developer. Should I use only CSS or the function code change also? Any help please?

Any help please on how to change a background (+) image for a (-) image when the "see more" button is clicked and become "see less"? I am sorry as I am not a good developer and would like to learn. Thank you.