Ссылка на открытие jQuery Accordion

Я пытаюсь открыть аккордеон div из внешней ссылки. Я вижу опцию "навигация: true", но я не уверен, как ее реализовать. Вы дайте каждому div id и вызов ссылка такой? 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>
9
accordion jquery

7 ответов

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

использование упрощенного 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>

"навигация: true" позволит вам перейти 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

13

на 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>
5

ха, взломал его.

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

php-код требует удаления кавычек.

теперь работает удовольствие.

Ура

Иэн

2

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

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

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

Edit:

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

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

1

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

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

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

<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>
1
$("a").click(function(event){
    var hash = window.location.hash;
    $("#accordion").accordion("activate", hash);
});

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

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

0