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

6 повідомлень

#13 років тому

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

<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();});

935 повідомлень

#13 років тому

Может так:

$('#menu ul:visible, #menu ul:visible ul').slideUp('normal');

6 повідомлень

#13 років тому

Цитата ("radar0080"):

Может так:

$('#menu ul:visible, #menu ul:visible ul').slideUp('normal');

не работает ((
добавляю:

$('#menu ul:first, #menu ul:first ul ').show();

Но это всего лишь заставляет открывать список "Главная" с подкаталогами только при обновлении страницы
Видимо решения тут нет , без напичкивания span-ами div-ами ((

935 повідомлень

#13 років тому

Я проверил этот скрипт в в браузере, у меня не работает он, вообще, так как вы описали в самом начале. Вообще, некорректно работает все. А css у вас влияет на работу скрипта? Если да, то выкладывайте и его, если нет, то скрипт исходный ваш - нерабочий (

6 повідомлень

#13 років тому

Цитата ("radar0080"):

Я проверил этот скрипт в в браузере, у меня не работает он, вообще, так как вы описали в самом начале. Вообще, некорректно работает все. А css у вас влияет на работу скрипта? Если да, то выкладывайте и его, если нет, то скрипт исходный ваш - нерабочий (

А jQuery подключили? (. Он тестово работает и без css. Но только :

<ul id="menu">

  <li> <a href="#">Главная</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="#">Programming Languages</a>

    <ul>

      <li><a href="#">PHP</a></li>

      <li><a href="#">Ruby</a></li>

    </ul>

  </li>

</ul>

А вот еще один уровень меню ни как.

на javascript.ru дали вот такой вариант:

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

посилання
тестово работает, вешаю на MODx не пашет.Где конфликт хз .

935 повідомлень

#13 років тому

Цитата ("In-TAME"):

А jQuery подключили?

Шутка? (по коду видно, что для jQuery)
Вот этот код попробуйте:

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();});

А в html с таким скриптом можно подкатологи и в нижнем пункте верхнего уровня разместить, например:

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

        <ul>

          <li><a href="#">Подкаталог 1</a></li>

          <li><a href="#">Подкаталог 2</a></li>

          <li><a href="#">Подкаталог 3</a></li>

        </ul>

      </li>

    </ul>

  </li>

</ul>

6 повідомлень

#13 років тому

Вот оно! Работает не с кем не ругается. radar0080 Спасибо большое!