используя jquery, как проще всего скопировать меню википедии (со стрелками)

#jquery #navigation #wikipedia

#jquery #навигация #википедия

Вопрос:

я хочу воспроизвести меню в левой части википедии

существует ли какой-либо плагин jquery, который выполняет развертывание и сворачивание, или я должен написать его с нуля?

В частности, я хочу, чтобы отображались стрелки вправо и вниз, указывающие на то, что это интерактивное меню

Комментарии:

1. api.jquery.com/toggle

Ответ №1:

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

Смотрите документацию jQuery для получения дополнительной информации: http://docs.jquery.com/Main_Page

Попробуйте это:

 <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>
  

Стили:

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

И ваш jQuery:

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

Комментарии:

1. Спасибо. . как бы мне получить стрелки вправо и вниз, как у них есть в ВИКИпедии, чтобы было понятно, что вы можете нажать на ссылку

2. Вы можете использовать фоновое изображение в divs с классом «title» и использовать отступ слева: 10 пикселей или около того, чтобы отодвинуть текст от изображения, чтобы текст не располагался поверх изображения. Затем вы можете использовать метод «toggleClass» в jQuery для добавления / удаления «выбранного» класса. Выбранный класс может переопределить фоновое изображение заголовка и отобразить другое изображение. Дайте мне знать, если хотите пример.

Ответ №2:

Используйте виджет accordion в пользовательском интерфейсе jQuery и оформите его так, как вам нравится. Или вы могли бы использовать эффект переключения.