DIV消逝上點擊顯示其他分區

所以我們可以說我有這樣的事情：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在重新點擊時不必返回。這就像一個「單程票」。點擊，它永遠消失了。

什麼可能是最簡單的方法來做到這一點？

來源

2017-08-05 Denver Dang

你已經做了嗎？請分享您的代碼 –

請向我們展示您嘗試過並且無法使用的內容？ – kukkuz

您可以使用JQuery UI獲取fade效果，並在.td2上註冊click事件，以按照您的要求更新DOM。下面是做這件事的一種方法：

$(".td2").on("click", function(){ 
 
\t $(".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>

來源

2017-08-05 04:55:02 Nisarg

$('.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的這個;）

來源

2017-08-05 04:57:35

此加入你的CSS：

.td3{ 
    display: none; 
}

而寫此javascript：

$('.td2').on("click", function(){ 
    $('.td2').fadeOut(); 
    $('.td3').fadeIn(); 
});

來源

2017-08-05 04:59:50 Ashkan

這是行不通的。你不能選擇'td2'作爲'＃td2'。 – Nisarg

DIV消逝上點擊顯示其他分區

回答

相關問題