Question

所以让我说我有这样的事情：

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不必在重新点击时返回。这就像一张“单程票”。点击，它就永远消失了。

最简单的方法是什么？

Answer 1

您可以使用JQuery UI获取fade效果，并在click上注册.td2事件，以便根据您的要求更新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>

Answer 2

from urllib.parse import urlparse

$('.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;
}

你需要学习一些javascript和一些jQuery;）

Answer 3

将此添加到您的css：

.td3{
    display: none;
}

并写下这个javascript：

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

Div点击后消失，显示其他div

3 个答案: