我有一个系统可以切换不同的部分。它几乎按照我想要的方式工作,除了出于某种原因,当我单击不同的 block 时,div project-name-block-container
中的所有内容都没有显示。图像显示在第一个 block 中,仅此而已。既然我用 div 包裹了所有内容,难道不应该显示所有内容吗?
除了改变一件事之外,还有一种方法可以使我拥有的功能保持不变。除了能够点击 project-name-block
来切换 block 之外,有没有办法让它在用户必须点击标题的地方?
var allPanels = $('.project-name-block-container').hide();
//$('.project-name-block:eq(0) .project-name-description').show();
$('.project-name-block').click(function() {
allPanels.slideUp();
$(this).children('.project-name-block-container').slideDown();
return false;
});
#project-section-container {
height: auto;
}
.project-name-block {
border-top: 1px solid black;
width: 100%;
cursor: pointer;
padding: 50px 0;
text-align: center;
}
.project-name-title {
color: blue;
font-size: 2em;
}
.project-name-description {
display: none;
font-size: 1em;
margin-top: 25px;
}
/*.project-name-description.active {
display: block;
}*/
/*--Project Images---*/
.project-image-container {
width: 90%;
margin: 50px 5%;
}
.project-img {
width: 30%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="project-name-block">
<div class="project-name-title">Project 1</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 1</div>
<div class="project-image-container">
<img src="images/projects/project1.jpg" alt="Demolition Project" class="project-img">
<img src="images/projects/project2.jpg" alt="Demolition Project" class="project-img">
</div>
</div>
</div>
<div class="project-name-block">
<div class="project-name-title">Project 2</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 2</div>
</div>
</div>
<div class="project-name-block">
<div class="project-name-title">Project 3</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 3</div>
</div>
</div>
<div class="project-name-block">
<div class="project-name-title">Project 4</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 4</div>
</div>
</div>
<div class="project-name-block">
<div class="project-name-title">Project 5</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 5</div>
</div>
</div>
</div>
最佳答案
你有 display:none
的描述......删除它
.project-name-description {
/*display: none;*/ REMOVE THIS LINE
font-size: 1em;
margin-top: 25px;
}
如果您希望元素的标题触发函数,只需更改该选择器,而不是 children
使用 next
:
var allPanels = $('.project-name-block-container');
$('.project-name-title').click(function() {
allPanels.slideUp();
$(this).next('.project-name-block-container').slideDown();
return false;
});
#project-section-container {
height: auto;
}
.project-name-block {
border-top: 1px solid black;
width: 100%;
cursor: pointer;
padding: 50px 0;
text-align: center;
}
.project-name-title {
color: blue;
font-size: 2em;
}
.project-name-description {
font-size: 1em;
margin-top: 25px;
}
.project-image-container {
width: 90%;
margin: 50px 5%;
}
.project-img {
width: 30%;
height: auto;
}
.project-name-block-container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="project-name-block">
<div class="project-name-title">Project 1</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 1</div>
<div class="project-image-container">
<img src="images/projects/project1.jpg" alt="Demolition Project" class="project-img">
<img src="images/projects/project2.jpg" alt="Demolition Project" class="project-img">
</div>
</div>
</div>
<div class="project-name-block">
<div class="project-name-title">Project 2</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 2</div>
</div>
</div>
<div class="project-name-block">
<div class="project-name-title">Project 3</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 3</div>
</div>
</div>
<div class="project-name-block">
<div class="project-name-title">Project 4</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 4</div>
</div>
</div>
<div class="project-name-block">
<div class="project-name-title">Project 5</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 5</div>
</div>
</div>
</div>
附加:
作为对您实际代码的改进,如果您想“切换”元素,请检查此代码段:
$('.project-name-title').click(function() {
var relative = $(this).next('.project-name-block-container');
if (!relative.hasClass('opened')) {
$('.opened').slideUp().removeClass('opened');
relative.addClass('opened').slideDown();
} else {
relative.slideUp().removeClass('opened');
}
return false;
});
#project-section-container {
height: auto;
}
.project-name-block {
border-top: 1px solid black;
width: 100%;
cursor: pointer;
padding: 50px 0;
text-align: center;
}
.project-name-title {
color: blue;
font-size: 2em;
}
.project-name-description {
font-size: 1em;
margin-top: 25px;
}
.project-image-container {
width: 90%;
margin: 50px 5%;
}
.project-img {
width: 30%;
height: auto;
}
.project-name-block-container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="project-name-block">
<div class="project-name-title">Project 1</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 1</div>
<div class="project-image-container">
<img src="images/projects/project1.jpg" alt="Demolition Project" class="project-img">
<img src="images/projects/project2.jpg" alt="Demolition Project" class="project-img">
</div>
</div>
</div>
<div class="project-name-block">
<div class="project-name-title">Project 2</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 2</div>
</div>
</div>
<div class="project-name-block">
<div class="project-name-title">Project 3</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 3</div>
</div>
</div>
<div class="project-name-block">
<div class="project-name-title">Project 4</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 4</div>
</div>
</div>
<div class="project-name-block">
<div class="project-name-title">Project 5</div>
<div class="project-name-block-container">
<div class="project-name-description">This is the text for Project 5</div>
</div>
</div>
</div>
关于javascript - 切换不显示容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37705842/