JS.style.display = “inline” 將在 CSS 中顯示為“inline-block”

Question

按照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與之前的文本在同一行中。

如果有人以前處理過這個問題，請幫助我！

謝謝

Answer 1

實際上是 jQuery 動畫 function 符合您的概念 - 如果您按照下面的方式刪除它，它會按預期工作（除了沒有動畫）。

 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>