div消失並顯示其他div
[英]Div fade away on click and reveal other div
問題描述
所以說我有這樣的事情：
body { background: #ffffff; } .table { display: table; margin: 0px auto; max-width: 400px } .row { display: table-row; width: 100% } .td1, .td2, .td3 { display: table-cell; border: 2px #aaaaaa solid; padding: 15px; background: #eeeeee; font-size: 18px; color: #000000; width: 100%; } .td2, .td3 { border-top: none; color: red; }
<body> <div class="table"> <div class="row"> <div class="td1">Here is some random text</div> </div> <div class="row"> <div class="td2">This is the text you see at first</div> </div> <div class="row"> <div class="td3">This is the text below the other div</div> </div> </div>
現在，我想做的是讓td2文本在您第一次看到該頁面時顯示，但沒有td3。 然后，當單擊td2 div時，它會淡出或向上滑動，然后顯示td3 div和該文本。 在這種特殊情況下，重新單擊時div不必返回。 這就像一張“單程票”。 單擊，它就永遠消失了。
這樣做最簡單的方法是什么？
3 個解決方案
解決方案1
1 已采納 2017-08-05 04:55:02
您可以使用JQuery UI獲得fade效果，並注冊.td2上的click事件，以便根據您的要求更新DOM。 這是一種實現方法：
$(".td2").on("click", function(){ $(".td2").fadeOut(); $(".td3").fadeIn(); });
body { background: #ffffff; } .table { display: table; margin: 0px auto; max-width: 400px } .row { display: table-row; width:100% } .td1, .td2, .td3 { display: table-cell; border: 2px #aaaaaa solid; padding: 15px; background: #eeeeee; font-size: 18px; color: #000000; width:100%; } .td2, .td3 { border-top: none; color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery-ui.min.js"></script> <div class="table"> <div class="row"> <div class="td1">Here is some random text</div> </div> <div class="row"> <div class="td2">This is the text you see at first</div> </div> <div class="row"> <div class="td3" style="display:none">This is the text below the other div</div> </div> </div>
解決方案2
0 2017-08-05 04:57:35
$('.td2').on('click', function() { $(this).fadeOut(200).promise() .done(function() { $('.td3').fadeIn(200); }); });
.table { display: table; margin: 0px auto; max-width: 400px } .row { display: table-row; width: 100% } .hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="table"> <div class="row"> <div class="td1"> Here is some random text </div> </div> <div class="row"> <div class="td2"> This is the text you see at first </div> </div> <div class="row"> <div class="td3 hide"> This is the text below the other div </div> </div> </div>
您將需要為此學習一些javascript和jQuery;）
解決方案3
0 2017-08-05 04:59:50
將此添加到您的CSS：
.td3{
display: none;
}
並編寫此javascript：
$('.td2').on( "click", function(){
$('.td2').fadeOut();
$('.td3').fadeIn();
});
如果在超過div秒內未單擊某個其他div，則顯示div
[英]Reveal div if no click on a certain other div for more than x seconds
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.