2016-11-22 296 views
2

我玩弄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的方法。

回答

3

您可以通過同時在兩個元素上調用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>

+0

這是完美的,非常感謝工作一種享受! – rufus

+0

有點晚了,但沒問題,樂於幫忙! :) –

相關問題