Question

所以我正在开发一个webapp，允许用户根据几个问题“找到”产品。首先，我需要一个基本的盒子网格，根据回答的问题和用户交互添加和删除盒子。

此jsfiddle.net显示我想要使用的图标/框/网格。我有两个问题：

我的链接（隐藏并添加以进行比较）“在翻转框之上”仅在第一次翻转之前工作
第二个框（以及第3个，第4个等）不会重新定位以填充已删除的框空间

我知道这可能比我提出的要复杂得多，但我只是想确保这是一个小错误。

我会尽快更新jfiddle和这个帖子

HTML：

<div id="wrapper" class="">
    <div id="icons">

        <div id="spa1" class="spa" title="Click for More Info">
            <div class="spaFlip">
                <img src="img/spas/spa1" alt="Spa1" width="200" height="200" />
            <div class="hide">
                <a onClick="" title="Hide">Hide</a>
            </div>
            <div class="compare">
                <a onClick="addToCompare('101');" title="Add to Compare">Add to Compare</a>
            </div>
        </div>
        <div class="spaData">
            <div class="spaURL">
                <a href="/spa1.php">Spa1</a>
            </div>
            <div class="spaDesc">
                <ul>
                    <li>Feature #1</li>
                    <li>Feature #2</li>
                </ul>
            </div>
            <div class="hide">
                <a onClick="" title="Hide">Hide</a>
            </div>
            <div class="compare">
                <a onClick="addToCompare('101');" title="Add to Compare">Add to Compare</a>
            </div>
            </div>
        </div>

    <div id="spa2" class="spa" title="Click for More Info">
            <div class="spaFlip">
                <img src="img/spas/spa2" alt="Spa2" width="200" height="200" />
            <div class="hide">
                <a onClick="" title="Hide">Hide</a>
            </div>
            <div class="compare">
                <a onClick="addToCompare('102');" title="Add to Compare">Add to Compare</a>
            </div>
        </div>
        <div class="spaData">
            <div class="spaURL"><a href="/spa2.php">Spa2</a></div>
            <div class="spaDesc">
                <ul>
                    <li>Feature #1</li>
                    <li>Feature #2</li>
                </ul>
            </div>
            <div class="hide">
                <a onClick="" title="Hide">Hide</a>
            </div>
            <div class="compare">
                <a onClick="addToCompare('102');" title="Add to Compare">Add to Compare</a>
            </div>
            </div>
        </div>

    </div>
</div>

CSS：

/* Main Styles */
body{
        font-size:1em;
        color:#666;
        background-color:#fff;
        font-family:Arial, Helvetica, sans-serif;
    }

/* jQuery Flip Icons */
.spaListHolder{margin-bottom:30px;}
.spa{
    width:250px;
    height:250px;
    float:left;
    margin:8px;
    position:relative;
    cursor:pointer;
}
.spaFlip{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:1px solid #ddd;
    background:url("img/background.jpg") no-repeat center center #f9f9f9;
}
    .spaFlip:hover{
        border:1px solid #999;
        -moz-box-shadow:0 0 30px #999 inset;
        -webkit-box-shadow:0 0 30px #999 inset;
        box-shadow:0 0 30px #999 inset;
    }
    .spaFlip img{
        position:absolute;
        top:50%;
        left:50%;
        margin:-100px 0 0 -100px;
    }
.spaData{
    display:none;
}
.spaDesc{
    position:absolute;
    top:50%;
    left:50%;
    margin:-70px 0 0 -100px;
    font-size:1em;
    font-style:italic;
}
    .spaDesc ul {
        margin:0;
    }
.spaURL{
    position:absolute;
    width:100%;
    top:5%;
    font-size:1.5em;
    font-weight:bold;
    text-align:center;
}
    .spaURL a {
        text-decoration:none;
    }
.clear{
    clear:both;
}
.compare {
    position:absolute;
    bottom:0;
    width:100%;
    height:20px;
    font-size:12px;
    text-align:right;
}
    .compare a {
        color:blue;
    }
.hide {
    position:absolute;
    top:0;
    width:50%;
    height:20px;
    font-size:12px;
}
    .hide a {
        color:blue;
    }

使用Javascript：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>
<script type="text/javascript">
    $(".compare,.hide,.spaURL").click(function (evt) {
        evt.stopPropagation();
    });
    $(document).ready(function(){
        $('.spaFlip').bind("click",function(){
            var elem = $(this);
            if(elem.data('flipped'))
            {
                elem.revertFlip();
                elem.data('flipped',false)
            }
            else
            {
                elem.flip({
                    direction:'lr',
                    speed: 350,
                    onBefore: function(){
                        elem.html(elem.siblings('.spaData').html());
                    },
                });
                elem.data('flipped',true);
            }
        });
    });
    $('.hide').click(function() {
        var p = $(this).parent().slideUp(300,function() {
            p.remove();
        });
    });
</script>

自动重新定位框和链接叠加

0 个答案: