javascript - 阻止div在单击jQuery时重新打开

我对jQuery / JavaScript相当陌生，我认为我不了解自己的代码。

当我再次单击.projtog时，它的行为与我想要的完全相同，但它又重新切换了我的.projContent，而我却不想这么做。当我重新单击与其关联的.projContent时，我想关闭.projtog。
我尝试给.projContent一个布尔值，但并不真正知道该怎么做。

这是我的代码：

$('div.projContent').css('height', '0vh');

$('h2.projtog').click(function() {

  var $dataName_2 = $(this).data("name");

  $('div.projContent').css('height', '0vh');

  setTimeout(function() {
    $("#" + $dataName_2).css('height', '100vh');
  }, 290);

});

#projectSection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 1em;
  padding-top: 0;
  width: 45vw;
  min-height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.proj {
  max-width: 40vw;
  color: #003c48;
  max-height: 100vh;
}

.projtog {
  text-align: left;
  transition: all 0.2s ease;
}

.projContent {
  max-width: 40vw;
  max-height: 57vh;
  overflow: scroll;
  transition: all ease-in-out 200ms;
  position: relative;
}

.projectImages {
  max-width: 40vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="proj">
  <h2 data-name="projectX" class="projtog"></h2>
  <h3></h3>
  <div class="projContent" id="projectX">
    <p></p>
    <img class="projectImages" src="">
  </div>
</div>

最佳答案

$('div.projContent').hide();

$('h2.projtog').click(function() {
  $(this).nextAll(".projContent").toggle();
});

上面的代码将切换projContent div。