按下按钮时出现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>

当我按下按钮时,没有任何反应.我尝试alert在.click函数中加入,但也失败了.所以我认为这有些不对劲,但据我所知,我不知道我做错了什么.

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>