Question

访问链接： https://www.earthhour.org/earthhour-faqs

我能够显示隐藏文字，但我根本不知道当该文本出现时如何使所有剩余文本自动向下移动，如图所示。

如果你解释整个事情，包括如何使用一个简单的示例页面显示隐藏文本（因为我有一些疑问）也会很好。 CSS和HTML只能使用!!

HTML：

   <li class="views-row views-row-1 views-row-odd views-row-first ui-accordion ui-widget ui-helper-reset" role="tablist">  
          <h4 class="question ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" id="ui-accordion-3-header-0" aria-controls="ui-accordion-3-panel-0" aria-selected="false" tabindex="0">What is Earth Hour?</h4>    
          <div class="answer ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-3-panel-0" aria-labelledby="ui-accordion-3-header-0" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;"><p>Earth Hour is a worldwide grassroots movement uniting people to protect the planet, and is organised by WWF. Engaging a massive mainstream community on a broad range of environmental issues, Earth Hour was famously started as a lights-off event in Sydney, Australia in 2007. Since then it has grown to engage more than 7000 cities and towns worldwide, and the one-hour event continues to remain the key driver of the now larger movement.</p>
</div>  </li>

不得不发布html，否则该网站不允许我发布问题。

Answer 1

不确定你想要做什么。这是一个解决方案，您可以尝试显示一个div / text，它将自动移动其他div。

＆＃13;

function showDiv()
{
  
  $('.first').css("display","block");
 }

＆＃13;

.first
{
  display : none;
  border : 1px solid red;
  }

.second 
{
  display : block;
  border : 1px solid yellow;
  margin : 5px auto;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">hidden text</div>
<div class="second">Second div</div>
<div class="second">Third div</div>
<br/>
<button onclick="showDiv()"> show div</button>

＆＃13;

Answer 2

希望它对你有所帮助。

＆＃13;

.collapse-header{
  cursor: pointer;
  display: block;
  background: #cdf;
}
.collapse-header + input{
  display: none; /* hide the checkboxes */
}
.collapse-header + input + div{
  display:none;
}
.collapse-header + input:checked + div{
  display:block;
}

＆＃13;

<label class="collapse-header" for="_1">Collapse 1</label>
<input id="_1" type="checkbox"> 
<div>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>

<label class="collapse-header" for="_2">Collapse 2</label>
<input id="_2" type="checkbox">
<div>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>

＆＃13;

如何使这个确切的效果???尽可能只用css？

2 个答案: