Блог

Главная - Вопросы по программированию - Как мне указать, какой элемент должен быть выбран / активен в этом виджете jQuery accordion?

Как мне указать, какой элемент должен быть выбран / активен в этом виджете jQuery accordion?

#jquery #jquery-ui

#jquery #jquery-ui

Вопрос:

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

 SectionMenu : function(){
$("#section-menu")
    .accordion({
        "header": "a.menuitem"
    })
    .bind("accordionchangestart", function(e, data) {
        data.newHeader.next().andSelf().addClass("current");
        data.oldHeader.next().andSelf().removeClass("current");
    })
    .find("a.menuitem:first").addClass("current")
    .next().addClass("current");
},

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

 <script>
    $("#section-menu")
    .accordion({
        "header": "a.menuitem",
        "collapsible": true,
        "active":4
    });
</script>

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

меню

Куда мне следует перейти отсюда, чтобы исправить это?

Спасибо!

Редактировать

Я прокомментировал последние две строки SectionMenu блока, и это решило проблему с тем, что первый элемент всегда выбирался как текущий. Теперь мне просто нужно иметь возможность обращаться .addClass("current") к соответствующему элементу, и это должно сработать.

Решение

Как и в моем последнем редактировании, я удалил последние две строки в SectionMenu блоке и добавил следующий код в <script> часть каждой страницы:

 <script type="text/javascript">
    $("#section-menu")
    .find("[href^='<HREF>']:first").addClass("current")
    .next().addClass("current");
</script>

Где <HREF> имя страницы. Это правильно выбирает и применяет CSS к соответствующему узлу.

Ответ №1:

Вы можете установить navigation опцию true для сохранения состояния на основе href. Документация здесь.

 $("#section-menu")
.accordion({
    "header": "a.menuitem",
    "collapsible": true,
    "navigation": true
});

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

1. Спасибо за ссылку. К сожалению, добавление этого в код приводит к расширению каждого элемента в меню.

2. Хорошо, я кое-что изменил, что вернуло меня туда, где я был, когда я опубликовал этот вопрос. Я добавил href="page.html" к родительскому <li> элементу, и это выбрало и расширило соответствующий узел. Однако к первому элементу по-прежнему применяется «текущий» CSS.

3. Нужно ли мне как-то использовать .find() , чтобы правильно применить стиль? Проверьте мое последнее редактирование, чтобы увидеть, что я обновил, чтобы быть на шаг ближе.

4. Я думаю, что сценарий accordion добавляет класс к текущему элементу. Вы можете найти этот класс и заменить его содержимое содержимым «текущего» класса.

5. Да, это так. В этой версии последние две строки SectionMenu блока всегда выбирают первую ( .find("a.menuitem:first").addClass("current").next().addClass("current") ) . Мне нужно как-то изменить эту часть, чтобы применить CSS к активному элементу.

Ответ №2:

 <script type="text/javascript">
    $("#section-menu")
    .accordion({
        "header": "a.menuitem",
        "collapsible": true,
        "active": <INDEX>
    });
</script>

Где <INDEX> находится <INDEX>th a.menuitem элемент вашего аккордеона

Вы можете прочитать больше на странице документации accordion

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

1. Спасибо за ваш ответ. Где мне это разместить? Я поместил его в свой <script> тег, но это заставило меня сделать шаг назад. Теперь первый элемент снова расширяется и выбирается как текущий.

Метки: ,