幻灯片/切换菜单的脚本?

时间:2013-06-07 23:07:06

标签: javascript jquery-ui slidetoggle

不知道是否可以提出这类问题,如果,那就删除它。

但我正在寻找某种滑动/切换菜单。我一直在谷歌上搜索,但我似乎无法找到任何诚实的东西。 我更像是一个HTML / CSS人,所以我不能自己编写代码,是jQuery或其他东西。这就是为什么我正在寻找一种我可以使用的脚本。

我附上了一张图片,显示了我想要它做的事情。enter image description here

左侧你看到右上方有一个小盒子,当我点击它时,我希望它向下扩展并保持这样,直到我再次点击按钮。如果有一个向上/向下箭头根据状态变化而变化,那就不会受到伤害。

那么任何能够指向可能能够做到这一点的脚本的人呢? :)

提前致谢。

1 个答案:

答案 0 :(得分:0)

也许是这样的?

HTML:

<div id="header">
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Boo</li>
        <li>Far</li>
    </ul>
    <div id="toggledWrapper">
        <p id="toggled">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div id="toggler">Toggle</div>
    </div>
</div>

JavaScript(使用jQuery):

$(document).ready(function() {
    $("#toggled").hide();

    $("#toggler").click(function () {
        $("#toggled").slideToggle();
    });
});

jsFiddle现场演示:http://jsfiddle.net/JTcRE/4/