Hide/display 单击按钮时隐藏 div
Hide/display hidden div when button is clicked
所以我已经为此工作了几天,就在我认为它很完美的时候,我不得不重组整个页面,但现在我被卡住了。我有三张图片,每张图片下面都有按钮。每次单击按钮时,我都需要它在页面底部显示隐藏的内容并隐藏所有可见的内容。我还需要页面向下跳转,使 div 的顶部位于 window 的顶部。这是我拥有的:
$("#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>
您似乎同时使用了 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>
我把你提供的代码放到 JSFiddle 中来玩玩。正如在另一个答案中指出的那样,您似乎在混合 vanilla JS 和 jQuery,并且还缺少您需要的关键功能(为 window 设置动画)。
我添加到您的代码中的主要内容是 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');
});
此函数查看您希望可点击的所有 "Template" div,然后获取所点击内容的 ID 并开始执行其操作(为清楚起见,我试图对其进行评论)。
完整的工作 JSFiddle 在这里:https://jsfiddle.net/your37or/
祝你好运!
所以我已经为此工作了几天,就在我认为它很完美的时候,我不得不重组整个页面,但现在我被卡住了。我有三张图片,每张图片下面都有按钮。每次单击按钮时,我都需要它在页面底部显示隐藏的内容并隐藏所有可见的内容。我还需要页面向下跳转,使 div 的顶部位于 window 的顶部。这是我拥有的:
$("#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>
您似乎同时使用了 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>
我把你提供的代码放到 JSFiddle 中来玩玩。正如在另一个答案中指出的那样,您似乎在混合 vanilla JS 和 jQuery,并且还缺少您需要的关键功能(为 window 设置动画)。
我添加到您的代码中的主要内容是 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');
});
此函数查看您希望可点击的所有 "Template" div,然后获取所点击内容的 ID 并开始执行其操作(为清楚起见,我试图对其进行评论)。
完整的工作 JSFiddle 在这里:https://jsfiddle.net/your37or/
祝你好运!