JQuery Accordion - открыть специальный раздел на странице загрузки - PullRequest
Новая
       11

JQuery Accordion - открыть специальный раздел на странице загрузки

15 голосов
/ 04 февраля 2010

У меня довольно простая реализация jQuery Accordion на странице (с использованием 1.3.2, jQuery UI Core 1.72 и jQuery UI Accordion 1.7.2), и я хочу открыть 2-й раздел при загрузке страницы. Я пробовал многочисленные методы, но, похоже, ничего не работает ...

ГОЛОВНОЙ СКРИПТ: 

<script type="text/javascript"> $(function() {
    $("#accordion").accordion({
        event: "mouseover"
    });

});

ТЕЛО АККОРДЕОН: 

<div id="accordion">
<h3><a href="#">Headline 001</a></h3>
<div>
<ul>
     <li><a href="#1">Link 001</a></li>
     <li><a href="#2">Link 002</a></li>
     </ul>
</div>
<h3><a href="#">Headline 002</a></h3>
<div>
     <ul>
    <li><a href="#3">Link 003</a></li>
     <li><a href="#4">Link 004</a></li>
     </ul>
</div>

Любая помощь будет принята с благодарностью!

Ответы [ 7 ]

20 голосов
/ 04 февраля 2010 
$("#accordion").accordion({ active: 2, event: "mouseover" });

Должен помочь!

ОБНОВЛЕНИЕ

, если это не сработает, попробуйте 

$("#accordion").accordion({  event: "mouseover" }).activate(2);

(NB thisобновляется, чтобы быть немного быстрее, спасибо за комментарии. Честно говоря, он должен работать с параметром 'active: 2', не знаю, почему это не так.)

10 голосов
/ 19 апреля 2013

правильный способ открыть определенную вкладку: 

$("#accordion").accordion({
    collapsible  : true,
    active       : false,
    heightStyle  : "content",
    navigation   : true
});

Установите опцию: 

//$("#accordion").accordion('option', 'active' , "INSERT YOUR TAB INDEX HERE");
$("#accordion").accordion('option', 'active' , 1);

или вы можете работать с таким хэшем: 

if(location.hash){

    var tabIndex = parseInt(window.location.hash.substring(1));     
    $("#accordion").accordion('option', 'active' , tabIndex);

}

Проголосуйте, если используете;)

Спасибо

8 голосов
/ 04 февраля 2010

Работает ли следующее? 

$(function() {
    $("#accordion").accordion({
        event: "mouseover",
        collapsible: true,
        active: 2
    });

});
3 голосов
/ 04 февраля 2010

Попробуйте 

$("#accordion").activate(index);
1 голос
/ 09 февраля 2012

Я решил этот вопрос немного по-другому, поскольку мне пришлось создать файл menu.php, который мы включили, я включил каждую страницу. В нашем проекте было 1 гармошка (элемент меню с 2 подменю). Поэтому, когда посетитель находится в подменю, аккордеон открыт и выбранная ссылка (которая выделяется с помощью CSS, а не jQuery) активна. Но когда посетитель находится на другой странице, аккордеон работает нормально.

Вот JavaScript: 

var containsParams = /teacher|student/i.test(window.location.href), //regexp with string params
accordion = $("li.accordion"); // the accordion as a global

accordion.accordion({ //accordion setup on every page
    animated : !containsParams,
    active : containsParams,
    collapsible : true,
    event : "click",
    header : "h2"
});

//I like to use "self calling methods" since many times I need a main onload event and this way it's clear for every page and my main function still remains
(function () {
    if (containsParams) accordion.accordion("activate", 0);
})();

Надеюсь, тебе понравится. =]

С наилучшими пожеланиями! =]

0 голосов
/ 19 мая 2015

Как уже упоминалось, при открытии активируется следующее: 

$("#accordion").accordion({ active: 1 });

Это active:1, поскольку это 2-ой индекс аккордеона {0,1,2,...}; Кажется, что в других ответах есть некоторая путаница, поскольку содержимое элемента содержит символ "2" ...

0 голосов
/ 08 июня 2014

Вы должны написать active: 1 вместо 2, потому что Accordion индексирует разделы от 0, а не от одного.Рабочий код будет выглядеть так: 

$("#accordion").accordion({ active: 1, event: "mouseover" });

Надеюсь, это немного поможет.

...