javascript - 单击按钮时隐藏/显示隐藏的 div

Question

所以我已经为此工作了几天，就在我认为它很完美的时候，我不得不重组整个页面，但现在我被困住了。我有三张图片，每张图片下面都有按钮。每次单击按钮时，我都需要它在页面底部显示隐藏的内容并隐藏所有可见的内容。我还需要页面向下跳转，使div的顶部位于窗口的顶部。这是我所拥有的:

$("#Template1").click(function() {
var div = document.getElementById('#content1');
if (div.style.display !== 'none') {
    div.style.display = 'none';
}
else {
    div.style.display = 'block';
}
});

.cell1 {
  display: table;
  text-align: center;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
}
.cell2 {
  display: table;
  text-align: center;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
}
.Column {
  vertical-align: top;
  width: 500px;
  display: table-cell;
}
#img1,
#img2,
#img3 {
  display: inline-block;
  align: center;
  padding: 10px 20px 10px 20px;
  vertical-align: top
}
#Template1,
#Template2,
#Template3 {
  margin-top: 14px;
  background-color: #cb3778;
  font-family: Arial;
  font-size: 20px;
  width: 260px;
  float: center;
  color: #FFF;
  cursor: pointer;
}
.Template0 {
  display: block;
  clear: both;
  width: 100%;
}
#content1,
#content2,
#content3 {
  display: none;
  clear: both;
  width: 100%;
}
@media only screen and (max-width: 600px) {
  *[class*="mobile-only"] {
    display: block !important;
    max-height: none !important;
  }
  .mobile {
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    margin-left: 0px !important;
    padding: 10px 0 10px 0 !important;
  }
  .mobile-img {
    display: block !important;
    Width: 100% !important;
    align: center !important;
  }
  .mobile-column {
    display: block !important;
    Width: 100% !important;
    align: center !important;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div align="center">
  <div class="Column mobile-column">
    <div class="cell1">
      <img width="400" height="355" border="0" src="col1-2.jpg" class="mobile-img" alt="Template 1" />
    </div>
    <div class="cell2 mobile" id="Template1">Template1</div>
  </div>
  <div class="Column mobile-column">
    <div class="cell1">
      <img width="400" height="355" border="0" src="6pack-1.jpg" class="mobile-img" alt="Template 2" />
    </div>
    <div class="cell2 mobile" id="Template2">Template2</div>
  </div>
  <div class="Column mobile-column">
    <div class="cell1">
      <img width="400" height="355" border="0" src="hero-1col.jpg" class="mobile-img" alt="Template 3" />
    </div>
    <div class="cell2 mobile" id="Template3">Template3</div>
  </div>
</div>

<div align="center">
  <div align="center" style="padding-top:150px;" id="content1">sample demo txt two 2</div>
  <div align="center" style="padding-top:150px;" id="content2">sample demo txt two 3</div>
  <div align="center" style="padding-top:150px;" id="content3">sample demo txt two 4</div>
</div>

Answer 1

我将您提供的代码放入 JSFiddle 中进行试验。正如在另一个答案中指出的那样，您似乎在混合 vanilla JS 和 jQuery，并且还缺少您需要的关键功能(动画窗口)。

我添加到您的代码中的主要内容是 div 上的一个 ID，它包含每个隐藏的内容 block 。这让我可以轻松地为 JS 函数定位该容器。然后我的 JS 变成了这样:

$("div[id^=Template]").click(function() {
    //Set a variable with this clicked item ID
    var id = $(this).attr('id');

    //Set a selector that points to the hidden content with the same name as this
    var theContent = $('#contents').find('.' + id);

    //Hide all the hidden stuff before revealing what is clicked
    $('#contents').children().hide();

    //Show the correct content based on this Div ID
    theContent.show();

    //Animate the body scroller down to the now revealed content
    $('body').animate({ scrollTop: $('#contents').offset().top }, 'fast');
});

此函数查看您希望可点击的所有"template"div，然后它获取被点击内容的 ID 并开始执行它的操作(为了清楚起见，我试图对其进行评论)。

完整的工作 JSFiddle 在这里:https://jsfiddle.net/your37or/

祝你好运!