javascript - 在其他元素之上打开元素

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 的示例中并没有真正显示出来，因为我对所有元素使用了相同的图像。
• 如果您单击任何其他图标，它将正确展开，除了它会到达顶行的最左 Angular 。它应该一直向左扩展(就像现在一样)但它应该更高。如果单击的元素不是行中的第一个元素，它仍应向左扩展相同的量。再次点击它应该会回到原来的位置。
• 您应该可以同时打开多个。如果您打开了一个，然后又打开了另一个，那么之前打开的元素应该会折叠成默认状态。

我已经搞砸了很长时间了。我希望我提供了足够的详细信息以获得帮助并使其正常工作。

Answer 1

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

您的演示的主要问题是 .offsetParent() 实际上返回一个 jQuery 对象而不是一个 position，所以当设置绝对定位元素的 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 都留在页面上!此外，由于定位的 logo 共享相同的 .logo class 它在可点击的页面上产生了多个“遗留” Logo 的进一步问题。

所以我的方法是 .clone() Logo 并将其放置在顶部，将其设置为打开动画，然后在关闭后将其从 DOM 中删除。我对 JavaScript 进行了大量评论，应该更详细地解释。我还使用了较新的 .on() 事件绑定(bind)方法而不是 .click()减少事件处理程序的数量，因为您使用的是 jQuery 1.7+。我注册了 2 个点击事件处理程序，一个用于 .logo类和一个用于 .openLogo类，以便打开 Logo 与主点击事件处理程序隔离。

我不打算在这里重新发布所有 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;
}