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

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

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，应该更详细地解释一下。我还使用了较新的.on()事件绑定方法而不是.click()来减少事件处理程序的数量，因为您使用的是jQuery 1.7+。我注册了2个点击事件处理程序，一个用于.logo类，一个用于.openLogo类，因此 open 徽标与主点击事件处理程序隔离。

我不会在此重新发布所有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;
}

打开其他人的元素

1 个答案: