如何改变 .toggle() 方法的展开方向？

Question

我正在使用 .toggle() jQuery 实现展开/折叠功能。

您知道如何将展开/折叠的方向从上左到下右改为从下到上吗？我不是jQuery专家，我只是找到了演示并使用了这些代码...

这是我的工作文件：http://www.streetlightministries.ca/2013 - 点击右上角的“时间和地点”。您会看到它从上左到下右展开。我更喜欢它从下到上展开。

如果您能帮忙，我将不胜感激！

谢谢。

- user1717475

Answer 1

首先，我建议使用.slideToggle()而不是.toggle()。它只是一个简单的折叠和展开。先尝试一下，看看你是否喜欢这个结果更好。

- Smeegs

Answer 2

你正在寻找 slideToggle。

如果你幸运的话，你只需要将 toggle() 更改为 slideToggle()。

- Karl-André Gagnon

---

我尝试了但没有成功，我认为这是因为toggle()和slideToggle()使用了不同的jQuery。还是谢谢你的帮助！ - user1717475

我不明白为什么这个方法没有起作用，但另一个答案却有效，因为它们完全相同。不管怎样，它现在可用了，这才是最重要的！ - Karl-André Gagnon

Answer 3

试试这个

$('blah').toggle('drop', {direction: 'right'}, 150)

- rolo1091

Answer 4

试试这个，使用回调属性

<script type="text/javascript">
            $(document).ready(function () {                        
                $(".scCollapAnchor").click(function () {
                    $('.iiColapsable').toggle("slide",
                        {
                            direction: 'up',
                            complete: function () {
                                if ($('#spanCollapsable').hasClass('glyphicon-chevron-down')) {
                                    $('#spanCollapsable').removeClass('glyphicon-chevron-down');
                                    $('#spanCollapsable').addClass('glyphicon-chevron-up');
                                }
                                else {
                                    $('#spanCollapsable').removeClass('glyphicon-chevron-up');
                                    $('#spanCollapsable').addClass('glyphicon-chevron-down');
                                }
                            }
                        }, 400);
                });
            });
        </script>

- Eric Ulises