Question

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

我想用一些效果（就像它的扩展一样），使用css或javascript。

这是一个视觉效果：

enter image description here

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

这根本不是我的舒适区，所以任何帮助都会受到赞赏。

Answer 1

#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); }) })

Answer 2

这可以帮助您：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;
 }

下次发布一些代码和尝试时，我们不会为您编写代码。

如何在点击时扩展div

2 个答案: