Question

到目前为止，我一直在寻找这个问题的解决方案3天，我无法弄清楚出了什么问题。我有4个div s（连续两个，列中有两个）在一个正方形

中

<div id="menuWrapper">
    <div id="imageSearch">

    </div>
    <div id="usualSearch">

    </div>
    <div id="dataBaseSearch">

    </div>
    <div id="cartoonSearch"></div>

</div>

JQuery的

 $('#usualSearch').click(function () {
    $('#imageSearch').hide('slide', {direction: 'left'}, '100');
    $('#dataBaseSearch').hide('slide', {direction: 'down'}, '100');
    $('#cartoonSearch').hide('slide', {direction: 'right'}, '100');
    $(this).delay('100').animate({height: '100%'}, 'fast').css({
    'z-index': '2',
    'border-radius': '50px 50px 50px 50px'
    });
    $(this).animate({width: '100%'}, 'fast');
});

CSS

#imageSearch{
border-radius: 50px 0 0 0;
background-color: #68f431;
width: 50%;
height: 50%;
float: left;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}

#usualSearch{
border-radius: 0 50px 0 0;
background-color: #f46f4d;
float: right;
width: 50%;
height: 50%;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}

#dataBaseSearch{
border-radius: 0 0 0 50px;
background-color: #71c3f4;
width: 50%;
height: 50%;
float: left; !important;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}

#cartoonSearch{
border-radius: 0 0 50px 0;
background-color: #f46fef;
width: 50%;
height: 50%;
float: right;
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
}

这是我的问题 - 我希望这些内容在height: 100%点击时变为width: 100%和#menuWrapper，但其他三个要留在下面。我的问题是所有其他元素都跳了起来，页面一团糟。感谢大家的帮助，如果您需要其他信息，请告诉我。

Answer 1

实现您的要求的最简单方法是为元素添加一些CSS样式。我建议，添加一个带有jQuery的类，但保留CSS中的样式。

#menuWrapper {
   position: relative;
}

#menuWrapper > div.active {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

然后，您需要使用jQuery将该类添加到元素中。

$("#menuWrapper div").click(function() {
   $(this).addClass("active");
}

与此相似，您可以再次删除该课程。我建议为每个div（而不是.element）添加另一个类（如#menuWrapper div左右）。

可以使用CSS3样式实现过渡/动画：

#menuWrapper > div {
   transition: 0.5s ease all;
}

jQuery 4 divs交换问题

1 个答案: