logo标签列表

jQuery - 垂直向上切换（即不是向下）

jqueryslidetoggle
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;
});

如果您“切换”一个项目，然后再切换另一个项目，则第二个项目（向下滑动）会下降300px，而不是向上滑动（上升）300px。我想要实现的一个很好的例子（讨厌这个网站）是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; }

有什么想法吗？

如果每次“点击”都关闭上一个切换并打开“已点击”的切换，那就太好了。

1
以下是我对下面发布的版本进行编辑后的内容 :D http://jsfiddle.net/s7AD8/2/ - XCS
@Cristy Ohhh 我讨厌你 :-) 这就是我所“创建”的“正确”方式，但我只使用 slideToggle 就可以让它工作 - 除非我漏掉了什么？ - Russell Parrott
是的，不需要动画，我只是使用它，因为下面的示例中使用了它：)) - XCS
4个回答
3

如果您提供了实际的CSS而不是填充内容，我可以给出更具体的答案。

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

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

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

这将导致它向上动画。
@patrick dw - 继续... ul#coltab li ul li.test { position: relative; line-height: normal;} 不是toggle "up"不起作用，而是如果你已经打开了一个toggled item，然后再次toggle，那么JQuery会"反转"代码。 - Russell Parrott
2
抢先一步了（当然），但我自己做了一个作为概念验证。 :) http://jsfiddle.net/66YCv/ - Mantar
@Russell：黄色是背景，而红色是菜单。这里有一个更新的示例，缩小了菜单的宽度。http://jsfiddle.net/s7AD8/1/也许你可以使用 jsFiddle 来创建你的代码的实际示例。 - user113716
@patrick dw 和 @Meke - 嗯，现在我明白了，感谢你们两个，问题出在 UL 上。如果我使用 Meke 的示例并加入 patricks 代码的一些补充，它就可以正常工作。我会完成代码，然后在这里发布。但是请告诉我如何最好地“奖励你们两个”，因为我只能接受一个答案，但你们两个都给了我解决方案的“片段”。 - Russell Parrott
不用担心，只需把答案交给提供最多信息的人。 :) （提示：是Patrick）（顺便说一句，以后你也可以投票支持评论） - Mantar
显示剩余6条评论
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; }

Test it here

我之前见过 .data('')，但不确定它是什么，但从你的例子中我猜测它计算“content”或数据的高度，即使 css display none？ - Russell Parrott
1
请查看文档：http://api.jquery.com/jQuery.data/ - “存储与指定元素相关的任意数据。” | 因此，此代码片段将需要切换的项目的原始高度存储起来，以便稍后动画到适当的顶部位置。 - steffenbew
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>
1
"

将“-=300px”作为预先计算的变量会更好。（你能在字符串中处理计算吗？）

此外，如果您希望独立操作它们，我想通过为要处理的部分提供ID，您将会更容易地实现。

"
是的，使用预先计算的变量来代替yes +/- = 300px会更好，但由于UL在切换之前为display none，因此它没有高度，所以你（好吧，我不能）必须使用height(); 来预先计算。如果这可以做到 - 通常 - 很想知道和学习。感谢评论。 - Russell Parrott
“你能处理字符串中的计算吗？”是的，jQuery可以让您在动画中这样做。 - user113716
@Patrick：我明白了...这确实为我的项目提供了一些新的选择^^谢谢 - Mantar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接