9

我需要创建一个向上而不是向下动画的切换，换句话说，与“正常”切换相反。也许更简单的是切换应该在菜单项（它是一个菜单）上方滑动以变得可见，而不是像正常的 slideToggle 等那样向下滑动。我几乎就在那里：

var opened = false;
$("#coltab li").click(function(){
    if(opened){
        $(this).children('ul').animate({"top": "+=300px"});
    } else {
        $(this).children('ul').animate({"top": "-=300px"});
    }
    $(this).children('ul').children().slideToggle('slow');
    $(this).children('ul').toggle();
    opened = opened ? false : true;
});

但是如果你“切换”一个项目然后另一个项目第二个项目（向下滑动）下降 300 像素而不是向上滑动（提升）300 像素。我想要实现的一个很好的例子（讨厌该网站）是http://market.weogeo.com/#/home和底部的“标签”。

我的 HTML 代码正在使用

<ul id="#coltab">
<li>Item 1
<ul>
<li>This bit needs to toggle up</li>
</ul>
</li>
<li>Item 2
<ul>
<li>This bit needs to toggle up</li>
</ul>
</li>
etc ...
</ul>

在 CSS 方面

ul#coltab { position: relative' blah; blah; }

和

ul#coltab  ul { display: none; position: absolute; blah; blah; }

有任何想法吗？

如果每次“点击”在打开“点击”切换之前关闭前一个切换，那就太好了。

4

4 回答 4

3

试试这个：

$("#coltab li ul").each(function (index) {
  $(this).data('height', $(this).outerHeight());    
});

$("#coltab li").click(function () {

    $("#coltab li ul.open").animate({"top": 0}, function () {
        $(this).removeClass('open');  
    });

    var itemHeight = $(this).children('ul').data('height');
    $(this).find('ul:not(.open)').animate({"top": -itemHeight}).addClass('open');

});

并添加一个新的 CSS 类：

#coltab ul.open { display: block; }

在这里测试

于 2011-01-01T16:06:41.930 回答
3

如果您为列表提供实际的 CSS 而不是填充物，我可以给出更具体的答案。

基本上，您需要将 to 的bottom属性设置ul#coltab ul为0。

通用示例：http: //jsfiddle.net/s7AD8/

ul#coltab  ul {
    position:absolute;
    bottom:0;
    /*...and so on*/
}

这将导致它向上动画。

于 2011-01-01T15:36:46.403 回答
1

如果您需要释放 ul 和 li 来做其他事情，您也可以使用不同的方式：

<style>
body { margin: 100px 50px; }

#coltab { position: relative; text-align: center; }

#coltab > li {
    background: #ccc;
    color: #444;
    cursor: pointer;
    display: block;
    float: left;
    margin: 0 10px;
    padding: 10px 20px;
    position: relative;
    width: 100px;
}

#coltab span {
    background: #eee;
    color: #222;
    display: none;
    padding: 5px;
    position: absolute;
    left: 0;
    right; 0;
    top: 0;
    z-index: -1;
}

#coltab span.open { display: block; }

</style>

<head>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"> </script>

</head>

<body>



<div id="coltab">
    <li>Item 1<br/>(click me)
            <span>This first item needs to toggle up</span>
    </li>
    <li>Item 2<br/>(click me)
            <span>This second item needs to toggle up</span>
    </li>
</div>

<script>
$(document).ready(function() {
$("#coltab li span").each(function (index) {
  $(this).data('height', $(this).outerHeight());    
});

$("#coltab li").click(function () {

    $("#coltab li span.open").animate({"top": 0}, function () {
        $(this).removeClass('open');  
    });

    var itemHeight = $(this).children('span').data('height');
    $(this).find('span:not(.open)').animate({"top": -itemHeight}).addClass('open');

});
});
</script>
</body>
于 2011-03-03T23:54:55.820 回答
1

“-=300px”作为一个预先计算的变量会感觉更好。（你甚至可以处理字符串中的计算吗？）

此外，如果您希望独立操作它们，我想您可以通过为要处理的部分提供 ID 来轻松得多

于 2011-01-01T15:31:49.703 回答