单击jQuery停止div重新打开

时间:2017-08-14 17:04:32

标签: javascript jquery html css custom-data-attribute

我是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>

1 个答案:

答案 0 :(得分:3)

select col1 from table1 where date > (select coalesce(date, to_date('01/01/1901','MM/DD/YYYY')) from table b);

上面的代码将切换$('div.projContent').hide(); $('h2.projtog').click(function() { $(this).nextAll(".projContent").toggle(); }); div。