JS .style.display = "inline“将在CSS中显示为"inline-block”
JS .style.display = "inline“将在CSS中显示为"inline-block”
提问于 2021-02-26 22:16:07
我正在编写一个“阅读更多”按钮的代码，遵循W3schools中的这个例子。代码基本上显示和隐藏了较长的文本。
我面临的问题是JS代码.style.display = "inline"，但它显示为inline-block，所以它将我的文本移到下一行。
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 = "Read more";
moreText.style.display = "none";
btnText.classList.remove("hide_me");
} else {
dots.style.display = "none";
btnText.innerHTML = "Hide";
btnText.classList.add("hide_me");
moreText.style.display = "inline";
jQuery("#more").animate({
maxHeight: '200px',
height: '200px'
}, );
}
if (document.getElementById('vec').style = "inline") {
document.getElementById("vec").style.display = "none";
document.getElementById("preberiVec").innerHTML = "Preberi več";
document.getElementById('pikice').style.display = "inline";
document.getElementById("preberiVec").classList.remove('skrij_me');
}
}#more {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<span id="dots">...</span>
<span id="more">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
an unknown printer took a galley of type and scrambled it to make a type specimen book.
</span>
<button onclick="myFunction()" class="gumb_vec" id="myBtn">Read more </button></p>
在下面的链接上，它显示了文本在单击阅读更多按钮后的显示方式：
文本在新行中显示为inline-block，但我希望在与之前的文本相同的行中显示为inline。
如果有人以前处理过这个问题，请帮帮我！
谢谢
回答 1
Stack Overflow用户
发布于 2021-02-26 22:23:08
这实际上是jQuery动画功能，你的概念恐惧-如果你按照下面的移除它，它的工作预期(除了没有动画)。
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 = "Read more";
moreText.style.display = "none";
btnText.classList.remove("hide_me");
} else {
dots.style.display = "none";
btnText.innerHTML = "Hide";
btnText.classList.add("hide_me");
moreText.style.display = "inline";
//jQuery("#more").animate({maxHeight : '200px', height : '200px'},);
}
}#more {display: none;}<p class="paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<span id="dots">...</span>
<span id="more">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
an unknown printer took a galley of type and scrambled it to make a type specimen book.
</span>
<button onclick="myFunction()" class="gumb_vec" id="myBtn">Read more </button></p>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66387418
复制相关文章
相似问题
腾讯云开发者
