切换不显示容器

Question

我有一个系统可以切换不同的部分。它几乎按照我想要的方式工作，除了某些原因，当我单击不同的块时 div project-name-block-container 中的所有内容都没有显示。图像显示在第一个块中，仅此而已。因为我用 div 包裹了所有内容，所以不应该显示所有内容吗？

除了改变一件事之外，还有什么方法可以使我拥有的功能保持不变。除了能够点击 project-name-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>

Answer 1

您有 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>

补充：

作为对您的实际代码的改进，如果您想要 "toggle" 元素，请检查此代码段：

$('.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>

Answer 2

这应该可以解决问题。您在 project-name-description div 上有 display:none，没有任何内容可显示。

var allPanels = $('.project-name-block-container').hide();
//$('.project-name-block:eq(0) .project-name-description').show();
$('.project-name-title').click(function() {   
  allPanels.slideUp();
  $(this).parent().find('.project-name-block-container').slideDown();
  return false;
});

.project-name-description{font-size:3rem;}
#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 {
 XXdisplay: 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>

切换不显示容器

Toggle not showing container

html

javascript

css

jquery

toggle