javascript - Jquery 在调用 .click() 后显示隐藏文本。可能是 Jquery 未正确安装的问题

Question

我知道这可能是一个重复的问题，但我仍然需要帮助。我正在创建一个网站，当单击按钮时，就会出现文本。我使用 display: none 将其隐藏在类中的 div 中。当我测试该网站时，我单击按钮但没有任何反应。控制台上没有错误，所以我假设它是 Jquery 未正确安装的问题(我确实使用了 npm install jquery)。

$(function(){
   $(".button").click(function(){
      $(".projectTextInfo").toggleClass(".show"); 
   });
});

.projectTextInfo {
  position: relative;
  display: none;
}

.show {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row justify-content-start">
    <div class = "mr-4 mb-5 monxProject  col-md-6 col-sm-6"> 
        <div class = "caption">
        <h4 class="project-text"> Ludem Dare </h4>
    </div>
    <div class = "thumbnail">
        <img class="projectIcon" src = "http://monxcleyr.net/images/mainsite/LDsmall.png">
        <button class="button">Test</button>
        <div class="projectTextInfo">
            <p>Howdy</p>
        </div>
    </div>
</div>

Answer 1

toggleClass(".show") 错误，是 toggleClass("show")。尝试一下:

$(function(){
   $(".button").click(function(){
      $(".projectTextInfo").toggleClass("show"); 
   });
});

.projectTextInfo {
  position: relative;
  display: none;
}

.show {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row justify-content-start">
    <div class = "mr-4 mb-5 monxProject  col-md-6 col-sm-6"> 
        <div class = "caption">
        <h4 class="project-text"> Ludem Dare </h4>
    </div>
    <div class = "thumbnail">
        <img class="projectIcon" src = "http://monxcleyr.net/images/mainsite/LDsmall.png">
        <button class="button">Test</button>
        <div class="projectTextInfo">
            <p>Howdy</p>
        </div>
    </div>
</div>