在他人之上打开元素

Question

我有一个图像和文本的网格。默认情况下，只显示图像。当用户点击图片时，它应该展开其他图片并显示文字。目前这部分工作。

http://jsfiddle.net/kbHfH/1/

<div id="container"> 
    <div class="logo"> 
     <img src="http://www.bnl.gov/today/intra_pics/2012/01/Intel-Logo-110px.jpg" alt=""> 

     <p class="logotext"> 
      ... 
     </p> 
    </div> 
    .... 

如果你点击第一行中最左边的图标，它会做我想做的。虽然有一些问题。

• 当您单击任何图标时，其他元素将滑动一个靠近最左上角的位置，因为由于绝对定位，单击的元素移出它的位置。在JSFiddle的示例中，滑动效果并未真正显示出来，因为我对所有元素都使用了相同的图像。
• 如果您单击任何其他图标，它将正确展开，除了它会位于顶行的最左边角落。它应该一直扩展到左边（就像现在这样），但它应该更高。如果点击的项目不是该行中的第一个，它仍然应该向左扩展相同的数量。再次点击它应该恢复到原来的位置。
• 你应该能够同时打开多个。如果您打开了一个，并且打开了另一个，则之前打开的元素应该折叠为默认状态。

我已经搞砸了很长一段时间。我希望我已经提供了足够的细节来获得帮助并使其发挥作用。

Answer 1

这是我认为满足所有要求的demo。

与您的演示的主要问题是，.offsetParent()实际上返回一个jQuery对象，而不是一个位置，与设置绝对定位的元素的CSS所以当：

$(element).css({ 
    marginLeft: position.left + "px", 
    marginTop: position.top + "px", 
    position: "absolute", 
    boxShadow: "0 3px 3px rgba(0, 0, 0, .1)" 
}); 

position.left和position.top是不确定的。如果您使用var position = $(element).position();，它将返回预期值。但是，这样做后，任何打开然后关闭的标志都留在页面上！此外，由于定位徽标共享相同的.logo类，它创建了更多的问题与可点击页面上的多个“遗留”的标志。

所以我的方法是将.clone()标志放置在顶部，将其设置为打开状态，然后将其从DOM中移除。我已经评论过应该更详细地解释的JavaScript。由于您使用的是jQuery 1.7+，因此我还使用了较新的.on()事件绑定方法而不是.click()来减少事件处理程序的数量。我注册了2个单击事件处理程序，一个用于.logo类，另一个用于.openLogo类，因此开放徽标与主要单击事件处理程序隔离。

我不打算在这里重新发布所有的HTML，因为我做的唯一更改是从最后删除<div id="clear"></div>。

HTML

<div id="container"> 
    <div class="logo"> 
     <img src="http://www.bnl.gov/today/intra_pics/2012/01/Intel-Logo-110px.jpg" alt=""/> 
     <p class="logotext"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </p> 
    </div> 
    <div class="logo"> 
     <img src="http://www.bnl.gov/today/intra_pics/2012/01/Intel-Logo-110px.jpg" alt=""/> 
     <p class="logotext"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </p> 
    </div> 
    <div class="logo"> 
     <img src="http://www.bnl.gov/today/intra_pics/2012/01/Intel-Logo-110px.jpg" alt=""/> 
     <p class="logotext"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </p> 
    </div> 
    <div class="logo"> 
     <img src="http://www.bnl.gov/today/intra_pics/2012/01/Intel-Logo-110px.jpg" alt=""/> 
     <p class="logotext"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </p> 
    </div> 
</div> 

的JavaScript

var $container = $('#container'); 

$container 
    .on('click', '.logo', function() { 
     var $logo = $(this); // wrap in jQuery once 

     // close any already open logos by triggering the click (see function below) 
     $('.openLogo').click(); 

     if ($('.logotext:hidden', this)) { // if logoText is hidden 
      var position = $logo.position(); // get position of clicked on logo 

      // clone existing logo otherwise making an existing one position:absolute would 
      // cause all the other logos to reflow inside the container 
      var $clone = $logo.clone() 
           // now place it in the same position as the one just clicked on 
           .css({top: position.top + 'px', left: position.left + 'px'}) 
           // give it some style 
           .addClass('openLogo') 
           // remove the original style 
           .removeClass('logo') 
           // append our clone to the container 
           .appendTo($container); 

      // animate open the clone 
      $clone.animate({ 
       width: '580px', 
       height: '160px' 
      }, 1000, function() { 
       // fade in logoText when animation complete 
       $clone.children('p').fadeIn(); 
      }); 
     } 
    }).on('click', '.openLogo', function() { 
     var $openLogo = $(this); 

     // fade out text first 
     $openLogo.children('p').fadeOut(400, function() { 
      // and when complete, animate logo back to original width/height 
      $openLogo.animate({ 
       width: '110px', 
       height: '80px' 
      }, 1000, function() { 
       // now just remove clone from DOM 
       this.remove(); 
      }); 
     }); 
    }); 

CSS

.logo { 
    width: 110px; 
    height: 80px; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1); 
    display:inline-block; 
    vertical-align:top; 
} 

.openLogo { 
    position:absolute; 
    box-shadow: 0 3px 3px rgba(0, 0, 0, .1); 
} 

.logo, .openLogo { 
    padding: 10px; 
    margin: 10px; 
    border-radius: 6px; 
    background-color: #fff; 
} 

.logotext { 
    display: none; 
    padding: 10px; 
    margin-top: -90px; 
    margin-left: 140px; 
    text-align: justify; 
} 

body { 
    background-color: #00000f 
} 

#container { 
    width: 640px; 
    margin: 50px; 
    border: 1px solid red; 
    position: relative; 
}