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

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

$(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>

Answer 2

尝试使用有效的Jquery：https://jsfiddle.net/bv5fLrth/18/

你错过了这个：);

从此结束：

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

Answer 3

取决于隐藏的类的CSS？您是否尝试将display none CSS添加到容器中，如此...

#container {
    display: none;
}

然后在你的脚本中使用slideToggle，但确保你的文档就绪函数在那里并且jquery语法正确...

$(function() {
  $('#showButton').click(function() {
    $('#container').slideToggle('fast');
  });
});

Answer 4

此解决方案使用jquery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$('#btn').click(function () {
    $('#main').toggleClass('hidden');  
});

<button id="btn">Change Mode</button>
<div id="main">
    <div>
        div One
    </div>
    <div>
        div two
    </div>
    <div>
        div three
    </div>
</div>

按下按钮时出现div

4 个答案: