Question

在onclick函数上，当我将鼠标滚动到Read More文本时，它没有显示光标，因此您知道它的可点击性。我已经能够通过使用cursor：pointer的css来做到这一点，但是我遇到的问题是第一次单击页面后所有元素都只有在我双击“ READ MORE”时才打开。第一次单击任何元素时，它将一键打开，但是当我转到下一个元素并单击时，需要单击两次。感谢您能提供的任何帮助。谢谢

<br><br>And all our treats are free from artificial colors and meet our standards for value and ingredient sourcing.&nbsp;&nbsp;

<span id="myBtn5" onclick="myFunction5()" style="color:#c44048;margin- 
    left:0px;cursor:pointer;"><em>READ MORE ▼</em></span>

<br>
<br>
<span id="dots" style="display: inline;"></span>
<span id="more5" style="display: none;">



    Every partner discloses the country of origin of every ingredient in each 
    treat, as well as how they go about sourcing the ingredient. We also make 
    sure that we partner with companies who we trust to find the best 
    ingredients for cats. 
    <br>
    <br>
    We ask Muddies’ cats to taste-test treats 
    before we commit to carrying treats in our stores. While we can’t guarantee 
    that every cat will love every treat, we hope with a little trial and error, 
    you’ll find something that delights your cat.

    <span id="dots" style="display: inline;"></span>
<span id="more5" style="display: none;">





    <script>
    function myFunction5() {
      var dots = document.getElementById("dots");
      var moreText = document.getElementById("more5");
      var btnText = document.getElementById("myBtn5");

      if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHtml = "READ MORE ▼";
        moreText.style.display = "none";
        } else {
        dots.style.display = "none";
        btnText.innerHTML = ""; 
        moreText.style.display = "inline";
         }
       }
       </script>
       </span>
</span>

Answer 1

尝试以下操作：https://jsfiddle.net/7rdqg38m/2/ 此解决方案确实需要jQuery和CSS。这使您可以使用toggleClass制作一个真正干净优雅的函数，当然还可以避免内联样式

index.html：

<br><br>And all our treats are free from artificial colors and meet our standards for value and ingredient sourcing.&nbsp;&nbsp;

<span id="myBtn5" onclick="myFunction5()" style="color:#c44048;margin- 
    left:0px;cursor:pointer;"><em>READ MORE ▼</em></span>

<br>
<br>
<span id="dots" class="hidden"></span>
<span id="more5" class="hidden">

    Every partner discloses the country of origin of every ingredient in each 
    treat, as well as how they go about sourcing the ingredient. We also make 
    sure that we partner with companies who we trust to find the best 
    ingredients for cats. 
    <br>
    <br>
    We ask Muddies’ cats to taste-test treats 
    before we commit to carrying treats in our stores. While we can’t guarantee 
    that every cat will love every treat, we hope with a little trial and error, 
    you’ll find something that delights your cat.

  <script>
    function myFunction5() {
        $('#dots').toggleClass('hidden');
        $('#more5').toggleClass('hidden');
      $('#myBtn5').toggleClass('hidden');
    }
  </script>

index.css

.hidden {
  display: none
}

无法获取光标指针以在悬停时显示

1 个答案: