HTML显示更多按钮不适用于所有移动浏览器

时间:2019-08-22 09:02:45

标签: javascript html css

我有一个“显示更多文字”按钮,该按钮在台式机上效果很好,但不适用于移动设备上的所有浏览器。它适用于Chrome应用,但不适用于Samsung Internet。有谁知道为什么会这样吗?与js有关吗?

代码为-

JS-

   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";
      } else {
        dots.style.display = "none";
        btnText.innerHTML = "Read less"; 
        moreText.style.display = "inline";
      }
    }

CSS-

.moretext{
      display: none;
    }

HTML-

 <div class = "textcontainer">
    <br>
    <br>
    <H3> SHOW YOUR LOVE WITH FLOWERS </H3>
    <p>
    <br>
    When you send flowers, it’s a deeply personal gesture of affection, we realise this well. Receiving a gift of flowers is intensely memorable to someone, because it makes them feel very special and loved. Flowers For Everyone gives you the assurance that we get it right, every time.
    <br>
    <br>
    <span id="dots"></span><span id="more" class="moretext">
    We have a striking range of luxury flower bouquets freshly cut & hand-delivered across the Western Cape province; from Sea Point with its breathtaking sea views and trendy restaurants, to the Cape winelands and beyond, we put smiles to faces. 
    <br>
    <br>
    </span></p>
    </div>

    <button onclick="myFunction()" id="myBtn">More...</button>
</div>

0 个答案:

没有答案