jquery - 如何避免 <div> 元素在展开时移位

Question

我正在使用 <div> 构建日历元素和 CSS。

使用 jQuery，当单击日历上的某一天时，一个类将应用于 <div>元素。这导致这一天的时间延长。

问题:

当日期扩展时，它会取代日历中的所有其他 div。如下图所示。

HTML

HTML 由 PHP for 循环创建，显示所选月份中的每一天。

<div id="calender">
     <div id="cal-day" class="1" onclick="expand(1)">
         <div id="datenum"><p>1</p></div>
     </div>
     <div id="cal-day" class="2" onclick="expand(2)">
         <div id="datenum"><p>2</p></div>
     </div>
</div>

CSS - 为了便于阅读，我删除了美观的样式代码。

#calender{
    position: relative;
    width: 1230px;
    height: 800px;
}

#cal-day{
    float: left;
    width: 200px;
    height: 200px;
    margin: 2px;
    overflow: hidden;
}

#datenum{
    width: 30px;
    height: 30px;
}
.dayselected{

    overflow: scroll !important;
    width: 400px !important;
    height: 400px !important;

}
#content{
    display: none;
}
#content.show{
    display: block;
}

jQuery:

function expand(date){

     if($("." + date).hasClass("dayselected")){

        $("." + date).removeClass("dayselected");
        $(".content" + date).removeClass("show");

     }else{

        $("." + selectedDay).removeClass("dayselected");
        $("." + date).addClass("dayselected");
        $(".content" + date).addClass("show");

    }

    selectedDay = date;

 }

选择日期之前:

选择一天后，与其他<div>元素移位:

是否可以让单击的日期覆盖其他 div 而不是取代它们？

这是一个 JSFiddle:https://jsfiddle.net/quucxwpy/

Answer 1

首先，您有多个重复的 id 属性，这意味着您的 HTML 无效。这些应该改为类。

要解决此问题，一种可能的解决方案是 clone() 原始 cal-day 元素并将其绝对放置在原始元素之上。这样就不会破坏其他同级 cal-day 元素的文档流。试试这个:

<div id="calender">
    <div class="cal-day">
        <div class="datenum">
            <p>1</p>
        </div>
    </div>
    <div class="cal-day">
        <div class="datenum">
            <p>2</p>
        </div>
    </div>
    <!-- other days...
</div>

$('.cal-day').click(function() {
    $('#dayselected').remove();
    var $day = $(this);
    var $dayClone = $day.clone(false)
        .prop('id', 'dayselected')
        .css({
            top: $day.position().top,
            left: $day.position().left
        })
        .appendTo('#calender');
});

$('#calender').on('click', '#dayselected', function() {
    $(this).remove();
});

Working example