jQuery隐藏div点击并显示另一个div

Question

我玩弄jQuery，我试图显示一个隐藏的div点击父div。一旦点击父div将隐藏其中的一些span标签，并显示来自隐藏div的p标签。这一点，我可以按照下面的小提琴工作。

$(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的方法。

Answer 1

您可以通过同时在两个元素上调用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>