开发者

using jquery, what is the easiest way to replicate the wikipedia menu (with arrows)

i want to replicate the 开发者_开发技巧menu on the left hand side of wikipedia

is there any jquery plugin that exists to do the expand and collapse or do i have to write it from scratch?

In particular, i want the right and down arrows to show to indicate that this is a clickable menu


$('selector').slideToggle('fast');

See jQuery's documentation for more info: http://docs.jquery.com/Main_Page

Try this out:

<div class="title">Title</div>
<div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
<div class="title">Title</div>
<div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

Styles:

.title
{
    padding-left:10px;
    background-image: url("ui/right_arrow.png") no-repeat;
}
.title.selected
{
    background-image: url("ui/down_arrow.png") no-repeat;
}

And your jQuery:

$('.title').live('click', function ()
{
    $(this).toggleClass('selected');
    $(this).next().slideToggle('fast');
});


Use the accordion widget in the jQuery UI and style it as you like. Or you could use the toggle effect.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜