javascript - 当使用jQuery和CSS显示隐藏的div时下推div？

我有5个按钮都包含一些不同的数据，我希望当您单击一个按钮时应显示其隐藏的数据，并按下其下面的div：

$(".Datanewpost").click(function() {
  $(this).find(".data").toggle();
});

.data {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">

  <div class="Datanewpost">
    Data 1
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd./div>
    </div>
    <div class="Datanewpost">
      Data 2
      <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
    </div>
    <div class="Datanewpost">
      Data 3
      <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd./div>
      </div>
      <div class="Datanewpost">
        Data 4
        <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
      </div>
      <div class="Datanewpost">
        Data 5
        <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
      </div>
    </div>

现在，它只是切换元素而没有按下它们，我需要更改什么才能得到我想要的？

最佳答案

关闭div时您缺少一些<

$(".Datanewpost").click(function() {
  $(this).find(".data").toggle();
});

.data {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">
  <div class="Datanewpost">
    Data 1
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
    </div>
  </div>
  <div class="Datanewpost">
    Data 2
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
    </div>
  </div>
  <div class="Datanewpost">
    Data 3
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
    </div>
  </div>
  <div class="Datanewpost">
    Data 4
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
    </div>
  </div>
  <div class="Datanewpost">
    Data 5
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
    </div>
  </div>
</div>

关于javascript - 当使用jQuery和CSS显示隐藏的div时下推div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52411215/