點擊按鈕時隱藏/顯示隱藏的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>