Ссылка для открытия jQuery Accordion

Question

Я пытаюсь открыть гармошку из внешней ссылки. Я вижу опцию "navigation: true", но не знаю, как ее реализовать. Вы даете каждому div идентификатор и называете ссылку, как это? http://domain.com/link#anchorid

Я новичок в jQuery, так что терпите меня. Вот код, который я использую, если он помогает.

<script type="text/javascript">
    $(function(){
        $("#accordion").accordion({ header: "h2", autoHeight: false, animated: false, navigation: true });
         });
    </script>
<div id="accordion">

<div>
    <h2><a href="#">Services</a></h2>
    <div class="services">
    <p>More information about all of these services</p>
    </div>
</div>

Answer 1

Опция навигации не для активации панели. Он говорит пользователю, где он находится.

Использование упрощенного HTML-кода:

<div id="accordion">

    <div>
        <h2><a href="#services">Services</a></h2>
        <p>More information about all of these services</p>
    </div>

    <div>
        <h2><a href="#about">About</a></h2>
        <p>About us</p>
    </div>

</div>

Вы указали уникальный идентификатор в гиперссылке в заголовке

Тогда jQuery (упрощенно):

<script type="text/javascript">
    $(function(){
        $("#accordion").accordion({ header: "h2", navigation: true });
     });
</script>

«навигация: истина» позволит вам перейти на сайт www.site.com/#about, в котором будет выбрана панель «о». Для активации есть несколько способов. Возможно, один из способов - это получить строку запроса и поместить ее в jQuery.

С C #

$("#accordion").accordion("activate", '<%= Request.QueryString["id"] %>');

С PHP

$("#accordion").accordion("activate", '<?php echo $_GET['id']; ?>');

Что позволит вам указать, какую панель открывать по адресу www.site.com?id=2

Answer 2

Опция navigation, на которую ссылаются многие из этих ответов, была устарела в jQuery UI 1.9 и удалено в 1.10. Причина была:

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

Таким образом, кодеры, использующие более новые версии jQuery UI, должны будут написать собственный код для обработки этой функции.

Для моего сайта я выполнил это с помощью оператора JavaScript switch непосредственно перед тегом </body>. (Я не опытный программист, поэтому другие могут свободно улучшать этот ответ.)

<script>
function switchToPanel(panel){
    var index = -1;
    switch (panel) {
        case "preschool":
            index = 0;
            break;
        case "kindergarten":
            index = 1;
            break;
        case "1st":
            index = 2;
            break;
        default:
            console.warn("Cannot switch to panel " + panel);
    }
    jQuery('#mathAccordion').accordion({active: index});
}

jQuery().ready(function() {
    if (window.location.hash) { //window.location.hash gets the anchor location out of the URL
        var target = window.location.hash.replace('#', ''); //remove the #
        switchToPanel(target);
    }
});
</script>

Вот соответствующий HTML-код:

<div class="accordion" id="mathAccordion">
    <h1>Preschool</h1>
    <div class="accordionFold">Preschool content</div>
    <h1>Kindergarten</h1>
    <div class="accordionFold">Kindergarten content</div>
    <h1>1st Grade</h1>
    <div class="accordionFold">First grade content</div>
</div>

Answer 3

Ха, взломали его.

Используйте метод php get. Однако в приведенном выше есть ошибка. $ ("# аккордеон"). аккордеон ("активировать", '');

код php нуждается в удалении кавычек.

Работает угощение сейчас.

Приветствия

Ian

Answer 4

Это сработало для меня.

<script>
$(function() {
    $( "#accordion" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        navigation: true,
        header: ".menuitem"
     });

    var hash = window.location.hash;
    var anchor = $('a[href$="'+hash+'"]');
    if (anchor.length > 0){
        anchor.click();
    }
});
</script>

и HTML ...

<div id="accordion">
        <h3 class="menuitem"><a href="#tab1">Tab1</a></h3>
        <div>
            More data....
        </div>
</div>

Answer 5

Это сработало для меня ...

var hash = window.location.hash;
$("#accordion").accordion("activate", hash);

Answer 6

С серверным языком проверьте запрос для этого #anchor и используйте его для заполнения оператора активации.

Извлечено из чего-то, над чем я только что работал:

$("#search_forms").accordion("activate", "{$this->open_form}");

Edit:

Я не могу связать напрямую с рекламой метода аккордеона, но это приближает вас

http://docs.jquery.com/UI/Accordion#methods

Answer 7

$("a").click(function(event){
    var hash = window.location.hash;
    $("#accordion").accordion("activate", hash);
});

это работает с jquery 1.8.3 и jqueryui 1.9.1 но, похоже, не работает с jqueryui 1.10.0

не знаю, почему ...