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.
精彩评论