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

Question

我有一个图像和文本网格。默认情况下，仅显示图像。当用户单击图像时，它应该在其他图像之上展开并显示文本。目前它正在部分工作。

<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 的示例中并没有真正显示滑动效果，因为我对所有元素都使用了相同的图像。
如果您单击任何其他图标，它将正确展开，除了它会转到顶行的最左角。它应该一直向左扩展（就像现在一样），但它应该更高。如果单击的项目不是该行中的第一个项目，它仍应向左扩展相同的数量。再次点击它应该让它回到原来的位置。
您应该能够同时打开多个。如果您打开了一个并打开了另一个，则先前打开的元素应该折叠到它的默认状态。

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

score 1 · Accepted Answer

这是一个我认为满足所有要求的演示。

您的演示的主要问题是它.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类，因此会产生更多问题，即页面上的多个“剩余”徽标可点击。

所以我的方法是.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;
}

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

1 回答 1

Related

Reference