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

祝好运！