Меню аккордеона jQuery - сохранить меню аккордеона открытым для страницы, на которой я нахожусь

Надеюсь, ты сможешь помочь. Я очень новичок в jQuery и работаю над пяти- или шестиуровневым меню аккордеона для моей боковой навигации. Я получил большую часть кода, который у меня есть до сих пор от Dane Peterson @daneomatic.com(спасибо датчанке!). Но я застрял в одном:

Я бы хотел, чтобы мой аккордеон/дерево работал следующим образом:

Когда я перемещаюсь вниз, скажем, на третий уровень, и нажимаю на ссылку, чтобы открыть страницу, связанную с этим уровнем, как я могу указать, когда страница уровня 3 загрузится, что я на этой странице? Кроме того, как сохранить дерево открытым для этого уровня при загрузке страницы?

Я предполагаю, что я спрашиваю: есть ли способ, чтобы аккордеон/дерево автоматически обновлялся, чтобы показать, на какой странице вы находитесь, и открываете ли дерево этому уровню?

Спасибо заранее!

Ответ 1

Чтобы получить аккордеон для автоматического открытия правильного раздела на основе URL-адреса, вы начнете с включения опции navigation с чем-то вроде:

$('#accordion').accordion('option', 'navigation', true);

По умолчанию эта опция ищет ссылку заголовка аккордеона с href, которая соответствует фрагменту URL-адреса (если ваш URL-адрес http://somesite.com/about#contact, #contact - это фрагмент) и открывает этот раздел заголовка. Поскольку вы используете аккордеон для перехода на разные страницы, вы, вероятно, не будете иметь URL-фрагменты, чтобы сопоставлять их, поэтому вам придется написать пользовательский navigationFilter:

$('#accordion').accordion('option', 'navigationFilter', function(){ ... });

Вы можете использовать параметр navigationFilter, чтобы переопределить, как плагин гармоник сопоставляет заголовки ссылок с URL-адресом текущей страницы.

До сих пор у нас есть подходящий раздел аккордеона для открытия на основе текущей страницы. Затем нам нужно выделить ссылку в этом разделе, соответствующую странице. Вы сделаете это с чем-то вроде:

<script type="text/javascript">
  $(document).ready(function() {
    $('#accordion li').each(function() {
      var li = $(this);
      var a = $('a', li);
      if(/* compare the href of the 'a' element to the current URL */) {
        li.addClass('active');
      }
    });
  });
</script>

<div id="accordion">
  <h3><a href="#">Section 1</a></h3>
  <div>
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    <ul>
      <li><a href="/help">Help</a></li>
      <li><a href="/faq">FAQ</a></li>
    </ul>
  </div>
</div>

Здесь мы просматриваем все ссылки на страницы в навигационном аккордеоне, выбираем тот, который соответствует текущему URL-адресу, и применяем к нему класс .active, который затем можно по-разному стилизовать с помощью CSS.

В стороне: другой, возможно, лучший способ выполнить вторую часть - это создать страницу с классом .active, уже примененным к соответствующей ссылке, но это предполагает, что вы имеете контроль над и что вы знаете, как это сделать. Фактически, если это произойдет, вы можете пропустить всю вещь navigationFilter и сгенерировать блок <script>, чтобы установить параметр active на аккордеоне, чтобы открыть правый раздел.

Ответ 2

ОК, эта проблема давно искала меня и подумала, что я отправлю решение этой проблемы. (Я немного новичок с JQuery, так что...)

В моем случае у меня есть главная страница, содержащая JQuery script для обработки автоматизации меню, и у меня есть несколько страниц контента, которые имеют разные меню (у меня есть горизонтальное меню по заголовку страницы, а затем аккордеон JQuery обрабатывает подменю, так сказать).

Я добавил теги id в div заголовков меню, а затем разместил следующее в заполнителе содержимого страницы содержимого.

    $(document).ready(function () {
        $('.active').next().hide().removeClass('active');
        $('#yourMenuHeaderIdTag).addClass('active').next().show();
     };

Это работает отлично, и это заставило меня задуматься, почему я боролся с этим за последнюю неделю или около того, когда решение так просто!

Ответ 3

Это одна из подводных камней JavaScript-ориентированных веб-сайтов - ваш URL-адрес фактически не указывает на вашу страницу, как на традиционную страницу. Это затрудняет использование обычных функций браузера, таких как закладки и кнопку "Назад".

Одним из решений, которое некоторые люди используют в эти дни, является сохранение этой информации после хэш-части URL.

http://www.mysite.com/path/index.html#jsPageIndicator

Сохраняя информацию вместо "jsPageIndicator" выше, вы можете проанализировать ее с помощью JavaScript после $(document).ready() и сообщить, какая страница должна быть загружена. В вашем случае это может быть что-то простое, например, указатель аккордеона, который имеет фокус (должен быть открытым).

Вы также можете посмотреть плагин истории jQuery.

Или, как указывает Алекс ниже, benalman.com/projects/jquery-bbq-plugin

Ответ 4

Вы можете увидеть здесь: http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php

Ответ 5

Ничто из этого не помогло мне. Документация для jquery ui является запасной, и исходный код не оставил много подсказок для кого-то, не очень разбирающегося в jquery.

Я использовал аккордеон на боковой панели, а ссылки в каждом разделе контента были внутри таблиц, поэтому мне пришлось отслеживать мою HTML-структуру (хрупкую вещь) и делать это сразу после создания аккордеона:

        $("#sidebar td").each(function () {
            var td = $(this);
            var a = td[0].firstChild;
            if (a.href == location.href) {
                $("#sidebar").accordion("activate",
                        td.parent().parent().parent().parent().prev());
            }
        });

Да, ужасно, резервное копирование tr, tbody, table и div, но это сработало, и в нашем случае мы не изменили HTML-структуру за несколько месяцев.

Ответ 6

Вот пример, который работал у меня:

Нужна помощь с jQuery UI. Аккордеонная опция навигацииФильтр