jQuery隐藏div点击并显示另一个div
问题描述:
我玩弄jQuery,我试图显示一个隐藏的div点击父div。一旦点击父div将隐藏其中的一些span标签,并显示来自隐藏div的p标签。这一点,我可以按照下面的小提琴工作。jQuery隐藏div点击并显示另一个div
$(document).ready(function() {
$('.wrapper').click(function() {
$('.hidden-text').toggle();
$('.test-span').hide();
});
});
.wrapper {
border: 5px solid #718373;
width: 200px;
height: 200px;
position: relative;
cursor: pointer;
}
.hidden-text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h4>Heading</h4>
<span class="test-span">some text</span>
<span class="test-span">some more text</span>
<div class="hidden-text">
<p>A half an hour lesson for one person will include 25 clays and 25 cartridges</p>
</div>
</div>
我遇到的问题是,我再想“上点击”再次逆转以上,但我只是不知道如何去做。我仍然在学习jQuery的方法。
答
您可以通过同时在两个元素上调用toggle()
来实现此目的。当它们以相反的状态开始时,那么切换将简单地切换在任何给定时间哪一个是可见的。试试这个:
$(document).ready(function() {
$('.wrapper').click(function() {
$('.hidden-text, .test-span').toggle();
});
});
.wrapper {
border: 5px solid #718373;
width: 200px;
height: 200px;
position: relative;
cursor: pointer;
}
.hidden-text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h4>Heading</h4>
<span class="test-span">some text</span>
<span class="test-span">some more text</span>
<div class="hidden-text">
<p>A half an hour lesson for one person will include 25 clays and 25 cartridges</p>
</div>
</div>
这是完美的,非常感谢工作一种享受! – rufus
有点晚了,但没问题,乐于帮忙! :) –