-1
我对jQuery/JavaScript相当新,我想我不明白我自己的代码。停止从重新点击jQuery的div
它的行为与我想要的完全相同,但是当我重新点击.projtog
时,它会重新切换我的.projContent
,我不想那样做。当我重新点击其关联的.projtog
时,我想.projContent
关闭。 我试着给.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>
但是... .projContent IS #projectX ... –
哦,我想我看到了......你想连续点击不会导致它隐藏和重新显示。在这种情况下......你需要一些条件来测试点击的是否是活动的。 –
你可以在最后删除'projtog'类。这样事件就不会继续发射。 (''click','.projtog',function(){...'并添加'$(this).removeClass(')',你必须稍微改写一下这个事件。 projtong')' – nurdyguy