如何在点击时展开 div答案

【问题标题】：How to expand div on click如何在点击时展开 div
【发布时间】：2015-01-02 19:26:21
【问题描述】：

我有一个包含一些缩略图的小部件。单击任何缩略图时，我想展开 div 以显示更多细节（另一个 div 块），覆盖小部件内容，但将小部件下方的内容向下推。

我想用 css 或 javascript 做一些效果（好像它在扩展）。

这是一个视觉效果：

显然，展开的绿色框会完全隐藏 2 个蓝色框。

这根本不是我的舒适区，因此我们将不胜感激。

【问题讨论】：

试一试，然后发布一些代码或 jsfiddle，jquery slidetoggle 方法将是一个很好的起点

标签： javascript jquery css css-transitions

【解决方案1】：

这可以帮助你：Pure CSS collapse/expand div
用那个小提琴：http://jsfiddle.net/thurstanh/emtAm/2/ :)

HTML：

<body>
<section>
  <article>
    <details>
      <summary>Step by Step Guides</summary>
      <details>
        <summary>Getting Started</summary>
        <p>1. Signup for a free trial</p>
      </details>
      <details>
        <summary>Setting up a backup schedule</summary>
        <p>This step assumes you have already signed up and installed the software</p>
      </details>
    </details>
    <details>
      <summary>Installation/Upgrade Issues</summary>
      <p>After setup the program doesn't start</p>
    </details>
  </article>

  <article>
    <details>
      <summary>SERVER Step by Step Guides</summary>
      <details>
        <summary>Getting Started</summary>
        <p>1. Signup for a free trial</p>
      </details>
      <details>
        <summary>Setting up a backup schedule</summary>
        <p>This step assumes you have already signed up and installed the software</p>
      </details>
    </details>
    <details>
      <summary>Installation/Upgrade Issues</summary>
      <p>After setup the program doesn't start</p>
    </details>
  </article>

css：

 summary::-webkit-details-marker {
  color: #00ACF3;
  font-size: 125%;
  margin-right: 2px;
 }
 summary:focus {
    outline-style: none;
 }
 article > details > summary {
     font-size: 28px;
     margin-top: 16px;
 }
 details > p {
     margin-left: 24px;
 }
 details details {
     margin-left: 36px;
 }
 details details summary {
    font-size: 16px;
 }

下次发布你的一些代码和你的尝试，我们不是来为你编码的。

【讨论】：

是的，那又怎样？这就是为什么你不赞成这个？我没有告诉你我写了这段代码，我只是想直接在这里写有帮助。
不，我没有投反对票。我只是说你的回答是“这可以帮助你”并链接到这个问题。我认为您输入了错误的 URL，仅此而已。如果这是重复的，我建议这样标记。

【解决方案2】：

这可以帮助你：http://jsfiddle.net/cojtfdLz/ 风格

#thumbs .thumb{cursor: pointer; background-color: red; float: left; margin: 0 20px 0 20px; width: 100px; text-align: center; height: 100px; position: relative;}
#thumbs .more{ display: none; position: absolute; width: 380px; top:0; left:0; background-color: blue; color:#fff}

html

<div id="thumbs">
    <div class="thumb">1
        <div class="more">th1 1111111 ...</div>
    </div>
    <div class="thumb">2
        <div class="more">th2 2222222 ...</div>
    </div>
    <div class="thumb">3
        <div class="more">th3 3333333 ...</div>
    </div>

</div>
<div style="clear: both;"></div>

<div style="background-color: #ccc; height: 200px; margin-top: 50px;"></div>

Javascript

var z=999;
$(function() {
    $('.thumb').click(function(){
       var $more=$(this).find('.more')
       $more.css('z-index',z).show();
       z++;

       var h=$more.height();     
       $(this).height(h);
    })

    $('.more').click(function(event){
        event.stopPropagation();
        $(this).hide();        
        $('.thumb').height(100);        
    })
})

【讨论】：