单击按钮时隐藏/显示隐藏的 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

您似乎同时使用 jQuery 和原始 DOM 操作。我认为你应该选择一个（可能是 jQuery）并坚持下去。以下应该有效：

$("#Template1").click(function() { $('#content1').toggle(); });

.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%;
}
.Template1,
.Template2,
.Template3 {
  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;" class="Template1" id="content1">sample demo txt two 2</div>
  <div align="center" style="padding-top:150px;" class="Template2" id="content2">sample demo txt two 3</div>
  <div align="center" style="padding-top:150px;" class="Template3" id="content3">sample demo txt two 4</div>
</div>

Answer 2

我将您提供的代码放入 JSFiddle 中进行操作。正如另一个答案中所指出的，您似乎正在混合使用香草 JS 和 jQuery，并且还缺少您需要的关键功能（动画窗口）。

我在您的代码中添加的主要内容是 div 上的 ID，它包含每个隐藏的内容块。这让我可以轻松地针对 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');
});

此函数查看您希望可点击的所有“模板”div，然后获取被点击内容的 ID 并开始执行其操作（为了清楚起见，我尝试对其进行评论）。

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

祝你好运！