点击按钮时隐藏/显示隐藏的div 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，用于保存每个隐藏的内容块。这让我可以轻松地将该容器作为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/

祝你好运！

Answer 2

你似乎同时使用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>