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>