Понедельник, 07 Мая 2012 13:11

Открывающийся список с помощью jQuery

Written by 
Оцени эту запись
(3 Голоса)

Ранее мы рассматривали создание выпадающего списка с помощью HTML, CSS и с помощью jQuery. Там рассматривалась ситуация горизонтального меню, один раздел которого содержит подразделы.

В этой статье рассмотрим случай, когда многие пункты меню содержат подпункты и этих подпунктов много. Мы сделаем список, в котором будут видны только разделы. Нажав на плюсик рядом с разделом, пользователь может его открыть и просмотреть все подразделы. Вместо плюсика при этом будет отображаться минус. Нажав на него, пользователь может закрыть раздел.

Такое меню идеально подойдет для создания списка категорий товаров.

 

 

 

Статьи о создании выпадающего списка можно посмотреть здесь:

 

 

Результат работы выпадающего списка при помощи jQuery выглядит так:

 

 

 

 

Создаем HTML-структуру открывающегося списка:

 

 

<ul class="open_list">
<li>
    <i class="plus">+</i>
        <a href="#">Раздел 1</a>
<div class="close">
<ul>
<li>
                    <i class="plus">+</i>
                    <a href="#">Подраздел 1</a>
                    <div class="close">
                        <ul>
                            <li><i class="minus">-</i><a href="#">Подраздел 1</a></li>
                            <li><i class="minus">-</i><a href="#">Подраздел 2</a></li>
                            <li><i class="minus">-</i><a href="#">Подраздел 3</a></li>
                            <li><i class="minus">-</i><a href="#">Подраздел 4</a></li>
                            <li><i class="minus">-</i><a href="#">Подраздел 5</a></li>
                        </ul>
                    </div>
                </li>
                <li><i class="minus">-</i><a href="#">Подраздел 2</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 3</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 4</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 5</a></li>
</ul>
</div>
    </li>
<li>
    <i class="plus">+</i>
        <a href="#">Раздел 2</a>
<div class="close">
<ul>
<li><i class="minus">-</i><a href="#">Подраздел 1</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 2</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 3</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 4</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 5</a></li>
</ul>
</div>
</li>
    <li>
    <i class="plus">+</i>
        <a href="#">Раздел 3</a>
<div class="close">
<ul>
<li><i class="minus">-</i><a href="#">Подраздел 1</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 2</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 3</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 4</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 5</a></li>
</ul>
</div>
    </li>
    <li>
        <i class="plus">+</i>
        <a href="#">Раздел 4</a>
<div class="close">
<ul>
<li>
                    <i class="plus">+</i>
                    <a href="#">Подраздел 1</a>
                    <div class="close">
                        <ul>
                            <li><i class="minus">-</i><a href="#">Подраздел 1</a></li>
                            <li><i class="minus">-</i><a href="#">Подраздел 2</a></li>
                            <li><i class="minus">-</i><a href="#">Подраздел 3</a></li>
                            <li><i class="minus">-</i><a href="#">Подраздел 4</a></li>
                            <li><i class="minus">-</i><a href="#">Подраздел 5</a></li>
                        </ul>
                    </div>
                </li>
                <li><i class="minus">-</i><a href="#">Подраздел 2</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 3</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 4</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 5</a></li>
</ul>
</div>
    </li>
    <li>
        <i class="plus">+</i>
        <a href="#">Раздел 5</a>
<div class="close">
<ul>
<li><i class="minus">-</i><a href="#">Подраздел 1</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 2</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 3</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 4</a></li>
                <li><i class="minus">-</i><a href="#">Подраздел 5</a></li>
</ul>
</div>
    </li>
</ul>

 

Идея:

Создаем список со структурой

 

<ul><li><a></a></li></ul>

 

Перед каждой ссылкой ставим 

 

  • <i class="minus">-</i> - если у пункта нету подпунктов
  • <i class="plus">+</i> - если есть подпункты

 

Если у пункта есть подпункты, внутри этого  <li> ставим <div class="close"></div>, а внутри него список такой же структуры с подпунктами. Когда этот список будем показывать, будем его класс close менять на open. А перед ссылком, при этом, будем менять <i class="plus">+</i> на <i class="minus">-</i>.

 

 

 

Пишем CSS:

 

 

.itemBody ul.open_list li {margin: 0px; background: none;}
.open_list li i {color: #f00;}
.open_list li .close {display: none;}
 
 
Скрипт:
 
 
jQuery(document).ready(function(){
jQuery('.open_list div').slideUp();
    jQuery('.open_list i').click(function(){
if(!jQuery(this).parent().children('div')){jQuery(this).className()='minus';}else{jQuery(this).toggleClass('plus minus');}
jQuery(this).parent().children('div').slideToggle();
jQuery(this).parent().children('div').toggleClass('close open');
if(jQuery(this).hasClass('plus')){jQuery(this).text('+');}else{jQuery(this).text('-');}
 
});
});
 
 

При клике на <i> открываем закрытый и закрываем открытый список подпунктов, меняем класс для <i> и плюс на минус.

Если родительский элемент списка не имеет подпунктов if(!jQuery(this).parent().children('div')), то плюс на минус не меняем.

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов