Question

我的HTML中有三个div个。我想要的最终结果是点击每个div将平滑扩展以填充整个屏幕（或全屏幕的父元素）并在div展开时显示其他信息（例如，点击＆＃39;恢复＆＃ 39;我需要展示更多内容）。我还想要一个角落的退出按钮来关闭扩展的div。

我不知道我需要合并的JavaScript或jQuery。 Here是我的HTML和CSS的JSfiddle

HTML：

<div class="page3">
    <div class="column" id="col1">
        <div class="centeringelement"></div>
        <a class="resumetitle" href=""><span></span>Education</a>
    </div>
    <div class="column" id="col2">
        <div class="centeringelement"></div>
        <a class="resumetitle" href=""><span></span>Work Experience</a>
    </div>
    <div class="column" id="col3">
        <div class="centeringelement"></div>
        <a class="resumetitle" href=""><span></span>Skills and Achievements</a>
    </div>
</div>

CSS：

.page3 {
    background: -webkit-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* FF3.6+ */
    background: -ms-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* IE10 */
    background: -o-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Opera 11.10+ */
    background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* W3C */
    border: 1px dashed yellow;
    width: auto;
    height: 100%;
    min-height: 99.6vh;
    text-align: center;
}

.column {
    width: 42.5vh;
    height: 42.5vh;
    border: 1px dashed #dc143c;
    display: inline-block;
    vertical-align: top;
    margin-top: 12.5%;
    margin-left: 1%;
    position: relative;
    margin-right: 1%;
}

.centeringelement {
    height: 45%;
    width: auto;
    border: 1px dashed white;
}

.resumetitle {
    vertical-align: middle;
    font-size: 1.75em;
    margin-top: 0;
}

span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

Answer 1

$('.column').click(function() {
  $(this).toggleClass('large')
})

.page3 {
  background: -webkit-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);
  /* Chrome 10+, Saf5.1+ */
  background: -moz-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);
  /* FF3.6+ */
  background: -ms-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);
  /* IE10 */
  background: -o-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);
  /* Opera 11.10+ */
  background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);
  /* W3C */
  border: 1px dashed yellow;
  width: auto;
  height: 100%;
  min-height: 99.6vh;
  text-align: center;
}
.column {
  background:orange;
  transition: .5s all;
  width: 42.5vh;
  height: 42.5vh;
  border: 1px dashed #dc143c;
  display: inline-block;
  vertical-align: top;
  margin-top: 12.5%;
  margin-left: 1%;
  position: relative;
  margin-right: 1%;
}
.centeringelement {
  height: 45%;
  width: auto;
  border: 1px dashed white;
}
.resumetitle {
  vertical-align: middle;
  font-size: 1.75em;
  margin-top: 0;
}
span {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.large {
  z-index:100000;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: -50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="page3">
  <div class="column" id="col1">
    <div class="centeringelement"></div> <a class="resumetitle"><span></span>Education</a>

  </div>
  <div class="column" id="col2">
    <div class="centeringelement"></div> <a class="resumetitle"><span></span>Work Experience</a>

  </div>
  <div class="column" id="col3">
    <div class="centeringelement"></div> <a class="resumetitle"><span></span>Skills and Achievements</a>

  </div>
</div>

这个怎么样

$('.column').click(function () {
    $(this).toggleClass('large')
})

.page3 {
    background: -webkit-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);
    /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);
    /* FF3.6+ */
    background: -ms-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);
    /* IE10 */
    background: -o-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);
    /* Opera 11.10+ */
    background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);
    /* W3C */
    border: 1px dashed yellow;
    width: auto;
    height: 100%;
    min-height: 99.6vh;
    text-align: center;
}
.column {
    transition:.5s all;
    width: 42.5vh;
    height: 42.5vh;
    border: 1px dashed #dc143c;
    display: inline-block;
    vertical-align: top;
    margin-top: 12.5%;
    margin-left: 1%;
    position: relative;
    margin-right: 1%;
}
.centeringelement {
    height: 45%;
    width: auto;
    border: 1px dashed white;
}
.resumetitle {
    vertical-align: middle;
    font-size: 1.75em;
    margin-top: 0;
}
span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.large {
    width:100%;
    height:100%;
    min-height:680px;
    min-width:680px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="page3">
    <div class="column" id="col1">
        <div class="centeringelement"></div> <a class="resumetitle"><span></span>Education</a>

    </div>
    <div class="column" id="col2">
        <div class="centeringelement"></div> <a class="resumetitle"><span></span>Work Experience</a>

    </div>
    <div class="column" id="col3">
        <div class="centeringelement"></div> <a class="resumetitle"><span></span>Skills and Achievements</a>

    </div>
</div>

Answer 2

这是示例代码：

$(document).ready(function(){
  $('.column').click(function(){
    $(this).css({'width':'100%','margin-left':'0px','margin-right':'0px'});
  });
});

.page3 {
    background: -webkit-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* FF3.6+ */
    background: -ms-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* IE10 */
    background: -o-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Opera 11.10+ */
    background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* W3C */
    border: 1px dashed yellow;
    width: 100%;
    height: 100%;
    min-height: 99.6vh;
    text-align: center;
    }

    .column {
    width: 42.5vh;
    height: 42.5vh;
    border: 1px dashed #dc143c;
    display: inline-block;
    vertical-align: top;
    margin-top: 12.5%;
    margin-left: 1%;
    position: relative;
    margin-right: 1%;
    }

    .centeringelement {
    height: 45%;
    width: auto;
    border: 1px dashed white;
    }

    .resumetitle {
    vertical-align: middle;
    font-size: 1.75em;
    margin-top: 0;
    }
    span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page3">
                <div class="column" id="col1">
                    <div class="centeringelement"></div>
                    <a class="resumetitle"><span></span>Education</a>
                </div>
                <div class="column" id="col2">
                    <div class="centeringelement"></div>
                    <a class="resumetitle"><span></span>Work Experience</a>
                </div>
                <div class="column" id="col3">
                    <div class="centeringelement"></div>
                    <a class="resumetitle"><span></span>Skills and Achievements</a>
            </div>
        </div>

Answer 3

试试这个。我已经扩展到父div的高度，它也会推动你的链接。如果您不想将链接按下，请调整链接的位置。

$(document).ready(function ()
{
    $(document).on('click','.resumetitle',function (e)
    {
        e.preventDefault();
        $(this).prev().animate({
            height:$(this).parent('.column').height()
        },500);
    });
});

动画Div扩展到全屏

3 个答案: