javascript - 按下按钮时出现 div

Question

我无法使选定的 div 在按下按钮时出现和消失。

<button id="showButton" type="button">Show More</button>

<div id="container">
    <div id="fourthArticle">
        <img class="row1pic" id="pic4" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
       <p>
       <span style="font-weight:bold;">This is a third article</span>
       this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
       </p>
    </div>

    <div id="fifthArticle">
        <img class="row1pic" id="pic5" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
       <p>
       <span style="font-weight:bold;">This is a third article</span>   
       this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
       </p>
    </div>

    <div id="sixthArticle">
        <img class="row1pic" id="pic6" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
       <p>
       <span style="font-weight:bold;">This is a third article</span> 
       this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
       </p>
    </div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

$('#showButton').click(function () {
    $('#container').toggleClass('hidden');  
}

</script>

当我按下按钮时，没有任何反应。我尝试在 .click 函数中放置一个 alert，但也失败了。所以我认为这有问题，但据我所知，我不知道我可能做错了什么。

Answer 1

1. 您的容器 div 未使用结束标记正确关闭 </div> .
2. 您的事件处理程序未正确关闭。

$(function() {
  $('#showButton').click(function() {
    $('#container').toggleClass("hidden");
  });
});

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showButton" type="button">Show More</button>

<div id="container">
  <div id="fourthArticle">
    <img class="row1pic" id="pic4" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
    <p>
      <span style="font-weight:bold;">This is a third article</span>
      this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
    </p>
  </div>

  <div id="fifthArticle">
    <img class="row1pic" id="pic5" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
    <p>
      <span style="font-weight:bold;">This is a third article</span> this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
    </p>
  </div>

  <div id="sixthArticle">
    <img class="row1pic" id="pic6" src="../Pictures/Gamerati/00-Shub-Niggurath-Rampage.jpg" alt="Freud everyone!">
    <p>
      <span style="font-weight:bold;">This is a third article</span> this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
    </p>
  </div>
</div>