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

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

1 个答案: