Javascript-форум - Меню аккардион jQuery

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Меню аккардион jQuery (https://javascript.ru/forum/jquery/29510-menyu-akkardion-jquery.html)

DzirT

01.07.2012 01:32

Меню аккардион jQuery

Господа программисты помогите пож-та немного доработать.
Есть вертикальное меню меню вида:

<ul id="menu">
  <li> <a href="#">Главная</a>
    <ul>
      <li><a href="#">Каталог 1</a></li>
      <li><a href="#">Каталог 2</a>
        <ul>
          <li><a href="#">Подкаталог 1</a></li>
          <li><a href="#">Подкаталог 2</a></li>
          <li><a href="#">Подкаталог 3</a></li>
        </ul>
      </li>
      <li><a href="#">Каталог 3</a></li>
    </ul>
  </li>
  <li> <a href="#">Programming Languages</a>
    <ul>
      <li><a href="#">PHP</a></li>
      <li><a href="#">Ruby</a></li>
    </ul>
  </li>
</ul>

При клике на Главную открываются пункты: Каталоги, а подкаталоги остаются скрыты.
Какие изменения внести в код ниже чтобы Подкаталоги тоже открывались при клике на Главную.

function initMenu() {
  $('#menu ul').hide();
  $('#menu ul:first').show();
  $('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});

aDiVaNToS

01.07.2012 13:42

Это все можно сделать с помощью одного лишь СSS и не нужно здесь скрипта =) сэкономишь на времени загрузки страницы пару милисек =)

devote

01.07.2012 14:00

Цитата:

Сообщение от aDiVaNToS

Покажешь как? Мне даже любопытно как ты это сделаешь так, что бы открытое меню еще и не закрывалось после открытия.

<style>
    #menu > li ul {
        display: none;
    }
    #menu > li > a:focus ~ ul,
    #menu > li > a:focus ~ ul ul {
        display: block;
    }
</style>
<ul id="menu">
  <li> <a href="#">Главная</a>
    <ul>
      <li><a href="#">Каталог 1</a></li>
      <li><a href="#">Каталог 2</a>
        <ul>
          <li><a href="#">Подкаталог 1</a></li>
          <li><a href="#">Подкаталог 2</a></li>
          <li><a href="#">Подкаталог 3</a></li>
        </ul>
      </li>
      <li><a href="#">Каталог 3</a></li>
    </ul>
  </li>
  <li> <a href="#">Programming Languages</a>
    <ul>
      <li><a href="#">PHP</a></li>
      <li><a href="#">Ruby</a></li>
    </ul>
  </li>
</ul>

aDiVaNToS

01.07.2012 14:30

devote,
извини забыл оно должно не сворачиваться=(
прочитал просто меню =)))

DzirT

01.07.2012 15:56

Видимо в таком варианте решения нет :cray:

Deff	01.07.2012 15:57

DzirT,
Да есть - не хнычь - думайте - или ждите вечера я или devote или melky
поправят
к примеру для инициализации нун так
$('#menu li:first ul').show()

DzirT

01.07.2012 18:29

нашел вариант к списку подкаталогов присвоить селектор :

<ul id="menu2">
            <li><a href="#">Подкаталог 1</a></li>
            <li><a href="#">Подкаталог 2</a></li>
            <li><a href="#">Подкаталог 3</a></li>
          </ul>

ну а далее .toggle() :

function initMenu() {
  $('#menu ul').hide();
  $('#menu ul:first, #menu li:first ul').show();
  $('#menu li a').click(
    function() {
	$('#menu2, #menu2 li, #menu2 li a').toggle()
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible, #menu li:visible ul').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});

На сколько это правильно? А вот без второго селектора, как изначально задумано, никак - не могу понять как указать в таком случае вложенность.
P.S. и так при клике на любом пункте <ul id="menu2">....</ul> закрывается.

devote

01.07.2012 18:53

Цитата:

Сообщение от DzirT

нашел вариант к списку подкаталогов присвоить селектор :

яж показал вариант на CSS, перелопатить его не джуквери не должно было составить труда:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #menu > li > ul {
                display: none;
            }
        </style>
        <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                $("#menu > li > a").click(function() {
                    $( "~ ul", this ).slideToggle();
                });
            });
        </script>
    </head>
    <body>
        <ul id="menu">
          <li> <a href="#">Главная</a>
            <ul>
              <li><a href="#">Каталог 1</a></li>
              <li><a href="#">Каталог 2</a>
                <ul>
                  <li><a href="#">Подкаталог 1</a></li>
                  <li><a href="#">Подкаталог 2</a></li>
                  <li><a href="#">Подкаталог 3</a></li>
                </ul>
              </li>
              <li><a href="#">Каталог 3</a></li>
            </ul>
          </li>
          <li> <a href="#">Programming Languages</a>
            <ul>
              <li><a href="#">PHP</a></li>
              <li><a href="#">Ruby</a></li>
            </ul>
          </li>
        </ul>
    </body>
</html>

DzirT

01.07.2012 19:37

Цитата:

яж показал вариант на CSS,

Кликнул на главную - открылось, кликнул на Programming Languages - открылось, а главная не закрылась. Тот код что я дал в начале есть чуть ли не в каждом ГС -блоге, и ваш вариант в интерпретациях попадался тоже. Но к сожалению варианта как я указал ( чистые списки с тремя уровнями, не накачанные тегами span div и тд не нашел, где при клике на пункт - неактивный свертывается, может плохо искал.

Цитата:

перелопатить его не джуквери не должно было составить труда

Извините, я только учусь, вернее пытаюсь.

devote

01.07.2012 19:58

Цитата:

Сообщение от DzirT

где при клике на пункт - неактивный свертывается, может плохо искал.

вот проблема то. Вы же ничего изначально не пояснили, от того и получили вариант не тот что нужно:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #menu > li > ul {
                display: none;
            }
            #menu > li:first-child > ul {
                display: block;
            }
        </style>
        <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                $("#menu > li > a").click(function() {

                    $( "~ ul", this ).slideToggle();

                    var self = $( this ).next();

                    $( "#menu > li > ul" ).each(function() {

                        if ( self[0] !== this ) {

                            $( this ).slideUp();
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <ul id="menu">
          <li> <a href="#">Главная</a>
            <ul>
              <li><a href="#">Каталог 1</a></li>
              <li><a href="#">Каталог 2</a>
                <ul>
                  <li><a href="#">Подкаталог 1</a></li>
                  <li><a href="#">Подкаталог 2</a></li>
                  <li><a href="#">Подкаталог 3</a></li>
                </ul>
              </li>
              <li><a href="#">Каталог 3</a></li>
            </ul>
          </li>
          <li> <a href="#">Еще какая то</a>
            <ul>
              <li><a href="#">Каталог 1</a></li>
              <li><a href="#">Каталог 2</a>
                <ul>
                  <li><a href="#">Подкаталог 1</a></li>
                  <li><a href="#">Подкаталог 2</a></li>
                  <li><a href="#">Подкаталог 3</a></li>
                </ul>
              </li>
              <li><a href="#">Каталог 3</a></li>
            </ul>
          </li>
          <li> <a href="#">Programming Languages</a>
            <ul>
              <li><a href="#">PHP</a></li>
              <li><a href="#">Ruby</a></li>
            </ul>
          </li>
        </ul>
    </body>
</html>

devote

01.07.2012 20:05

Цитата:

Сообщение от Deff

к примеру для инициализации нун так

к примеру для инициализации, достаточно в CSS написать:

#menu > li > ul {
    display: none;
}
#menu > li:first-child > ul {
    display: block;
}

Deff	01.07.2012 20:07

devote,
Ти такой жа настойчивый, как и мну - в ИЕ 6-7 не работает (Думаю чел упёрси в это

devote

01.07.2012 20:09

Цитата:

Сообщение от Deff

в ИЕ 6-7 не работает (Думаю чел упёрси в это

first-child работает и в ИЕ6 и в ИЕ7 и других подавно, этот псевдо-селектор еще вошел в CSS2

Ну а про джуквери думаю говорить и не надо, где он работает а где нет.

Deff	01.07.2012 20:16

devote,
Проверил в ИЕ6 - не пашет - в ИЕ7 сработал

devote

01.07.2012 20:19

Цитата:

Сообщение от Deff

Проверил в ИЕ6 - не пашет

ну значит и хрен с ним с этим ИЕ6, беда прям велика.

DzirT

01.07.2012 21:28

devote,
Гениально! работает. спасибо! На сайте правда пока не хочет , движок MODx, видимо конфликт какой то. Но это уже история для другой сказки.

DzirT

02.07.2012 11:30

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
function initMenu() {
  $('#menu ul').hide();
  $('#menu ul:first').show();
  $('#menu ul:first ul').show();
  $('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
      $('#menu ul:visible ul').slideUp('normal');
        checkElement.slideDown('normal');
      checkElement.find('ul').slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});
        </script>
    </head>
    <body>
        <ul id="menu">
          <li> <a href="#">Главная</a>
            <ul>
              <li><a href="#">Каталог 1</a></li>
              <li><a href="#">Каталог 2</a>
                <ul>
                  <li><a href="#">Подкаталог 1</a></li>
                  <li><a href="#">Подкаталог 2</a></li>
                  <li><a href="#">Подкаталог 3</a></li>
                </ul>
              </li>
              <li><a href="#">Каталог 3</a></li>
            </ul>
          </li>
          <li> <a href="#">Еще какая то</a>
            <ul>
              <li><a href="#">Каталог 1</a></li>
              <li><a href="#">Каталог 2</a>
                <ul>
                  <li><a href="#">Подкаталог 1</a></li>
                  <li><a href="#">Подкаталог 2</a></li>
                  <li><a href="#">Подкаталог 3</a></li>
                </ul>
              </li>
              <li><a href="#">Каталог 3</a></li>
            </ul>
          </li>
          <li> <a href="#">Programming Languages</a>
            <ul>
              <li><a href="#">PHP</a></li>
              <li><a href="#">Ruby</a></li>
            </ul>
          </li>
        </ul>
    </body>
</html>

Deff	02.07.2012 11:45

DzirT,
:) ?

Часовой пояс GMT +3, время: 03:30.