2

我有一个 PhoneGap/Cordova 项目，这意味着我必须结合使用 JQuery 和 CSS 过渡来实现动画（JQuery 动画在 iOS 上很笨重）。

我已经编写了一些代码来实现一系列下拉菜单，但是我认为它做得很糟糕，我正在寻找一些关于如何改进它的建议。

我主要关心的是 div 的定位，尤其是负边距的使用。

如果我要更改 div 的长度，它将通过所有不对齐的内容 - 我必须应用负边距顶部以使它们显示在屏幕顶部，否则它们会像它们一样坐在底部已经正常加载，一个接一个。

此外，如果没有对它们应用翻译，我会在应该是 div 的页面底部获得大量空白。

CSS：

#dropdiv1 {
    -webkit-transform: translate(0, -3000px);
    -webkit-transition: all ease-in 1s;
}

#dropdiv2 {
    -webkit-transform: translate(0, -3400px);
    -webkit-transition: all ease-in 1s;
}

#dropdiv3 {
    -webkit-transform: translate(0, -4200px);
    -webkit-transition: all ease-in 1s;
}

查询：

$('#clickme1').click(
                      function() {
                      $('#dropdiv1').css('-webkit-transform','translate(0, -335px)');
                      });

  $('#clickme2').click(
                        function() {
                        $('#dropdiv2').css('-webkit-transform','translate(0, -2335px)');
                        });

  $('#clickme3').click(
                        function() {
                        $('#dropdiv3').css('-webkit-transform','translate(0, -3300px)');
                        });
4

1 回答 1

0

我对 css 进行了一些更改 - 将 position: absolute 和 z-index 添加到#dropdivs。这解决了它们相互“堆叠”的问题。然后，我将每个 div 放置在其各自的#clickme div/button 下，这样当它出现时，它就会出现在正确的位置。

唯一的缺点是我必须设置页面的高度以适应显示时最高的#dropdiv，否则页面底部会将其切断。

我的代码：

<div id="bigcontainer">
    <ul class="mainmenu">
     <li><a id="clickme1" href="#">Click Me 1</a></li>
                    <div class="showdata"  id="dropdiv1">
                        Lots of random text....
                </div>
 <li><a id="clickme2" href="#">Click Me 2</a></li>
                <div class="showdata"  id="dropdiv2">
                    Lots of random text....
                </div>     
 <li><a id="clickme3" href="#">Click Me 3</a></li>
                <div class="showdata"  id="dropdiv3">
                   Lots of random text....
                </div>
</ul>
</div>

CSS：

#bigcontainer {
height: 1500px;/*as big as the bigest dropdiv to enable scrolling*/
}    

#dropdiv1 {
    -webkit-transform: translate(0, -3000px);
    -webkit-transition: all ease-in 1s;
    z-index: 1;
    position: absolute;
}

#dropdiv2 {
    -webkit-transform: translate(0, -3400px);
    -webkit-transition: all ease-in 1s;
    z-index: 2;
    position: absolute;
}

#dropdiv3 {
    -webkit-transform: translate(0, -4200px);
    -webkit-transition: all ease-in 1s;
    z-index: 3;
    position: absolute;
}
于 2012-07-01T02:38:20.217 回答