Аккордеон пользовательского интерфейса jQuery активируется

Я не понимаю, как это сделать, или если я могу это сделать. У меня есть JQuery UI Accordion, несколько разделов с каждым разделом, содержащим несколько тегов привязки, каждый с уникальным идентификатором строки.

Я бы хотел, чтобы аккордеон был открыт для того, где находится конкретный элемент с заданным идентификатором. Как сказать id "item117". Могу ли я использовать что-то вроде

$('#accordion').activate('activate','#item117');

или даже

$('#accordion').activate('activate',117);

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

Я все еще не понимаю, так что, возможно, я делаю что-то еще неправильное. Я разделил его на примерную страницу здесь: http://www.ofthejungle.com/testaccordion.php Пожалуйста, посмотрите на него и его источник.

Ответ 1

тоже были над этим и нашли хорошее и универсальное решение
- эмулировать щелчок заголовком требуемого элемента по его идентификатору

$('#header-of-item-258').click();

который работает каждый раз и где угодно, а не только аккордеон

Ответ 2

Из документации:

// getter
var active = $( ".selector" ).accordion( "option", "active" );

// setter
$( ".selector" ).accordion( "option", "active", 2 );

Ответ 3

для меня работала

$("#accordion").accordion({active:"h3:last"})

Ответ 4

Вам нужно вызвать его с помощью функции accordion:

// Open the third set (zero based index)
$('#accordion').accordion('activate', 2);

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

$('#accordion').accordion('activate', '#accordion > div:has(#item117) > h3');

Ответ 5

Это НАКОНЕЦ помогло мне:

$("#accordion").accordion("activate", $("#h3-id"));

Внимание!!! Идентификатор должен быть идентификатором <h3 > который вы хотите открыть (в настройке по умолчанию аккордеона).

Ответ 6

У меня была та же проблема с активацией аккордеона С#id. К сожалению, я не нашел пути к этому, поэтому я создал хак. Я перебираю элементы div в моем аккордеоне, чтобы получить индекс интересного div. Это выглядит так:

acc = 'tab-you-are-interested-in';

// find corresponding accordion
act = 0;
panels = $('#accordion-element > div');
for (i=0; i<panels.length; i++) {
    if ( panels[i].id == acc ) {
        act = i;  
    }
}

$('#accordion-element').accordion('activate', act);

Ответ 7

Когда вы нажимаете на заголовок, это элемент h3, и он открывает следующий div. Это функциональность. Теперь для активации вам нужно указать индекс или элемент. индекс может отличаться от вашего идентификатора. поэтому я бы использовал:

$('.selector').accordion('option', 'activate', $(h3#id));

Если у вас есть индекс, вы можете использовать его. Но в большинстве случаев, если вы создали динамический динамик, получить индекс id непросто. Вы можете найти такие индексы.

 var processingHeaders = $('#accordion h3');
 for (i = 0; i < processingHeaders.length; i++) {

        ids.push($(processingHeaders[i]).attr('id'));
        idsForLaterChecks.push($(processingHeaders[i]).attr('id')); 
    }

теперь я получил идентификаторы.. используя indexOf: найдите индекс в массиве и используйте его.

Примечание://idsForLaterChecks является глобальным

Ответ 8

С jQuery 1.9+:

$('#accordion').activate('activate', elementSelector);

теперь:

$('#accordion').activate('option', 'active', elementSelector);

Если вам проще использовать методы перемещения, если у вас есть такой HTML:

<div id="accordion">
    <h3><a href="#">Section</a></h3>
    <div>
        <p id="#item117" class="item">
            <a class="link-active" href="">Item 117</a>
        </p>            
    </div>
</div>

попробуйте следующее:

var myh3 = $('#item117').parent().prev('h3');
$('#accordion').accordion('option', 'active', myh3);

Ответ 9

Попробуйте

$('#accordion').activate('#item117');

или

$('#accordion').activate(document.getElementById('item117'));

Правильный синтаксис для активации аккордеона -

$(".selector").activate(var index)

где index - String, Element, boolean, Number, JQuery

Ответ 10

Вы также можете включить и отключить аккордеон следующим образом:

// Add the class ui-state-disabled to the headers that you want disabled
$( ".whatyouwantdisabled" ).addClass("ui-state-disabled");

Чтобы активировать вкладку:

// Remove the class ui-state-disabled to the headers that you want to enable
$( ".whatyouwantenabled" ).removeClass("ui-state-disabled");

Ответ 11

Здесь другой путь.

Включите идентификатор = "someId" только в каждом из тегов заголовка H3 аккордеона и назовите уникальный идентификатор.

Например, этот идентификатор будет последовательно "AccjA", следующий h4 будет "AccjB":

<h4 class="Accj" id="AccjA">
       <a href="#settings">A Fan?</a>
</h4>

Затем активируйте любую панель, которую вы хотите:

    $('#Accjoin').accordion('activate', '#AccjoinA')

Я использовал вышеприведенный тайм-аут, чтобы привлечь внимание пользователя после загрузки страницы с задержкой в 2 секунды с помощью функции ".doTimeout" Бен Альмана, например:

$.doTimeout(2000, function () {
    $('#Accjoin').accordion('activate', '#AccjoinA')
});

Ответ 12

Как получить jQuery API

Активируйте второе содержимое Аккордеона, содержащегося в.

$(".selector").activate(1)

Закройте все части содержимого аккордеона.

$(".selector").activate(false)

Активировать первый элемент, соответствующий данному выражению.

$(".selector").activate("a:first")

Ответ 13

$('#collapseOne').collapse('toggle');