Функциональность JQuery Accordion Anchor

Я пытаюсь добавить следующее поведение в JQuery Accordion:

1) Активировать раздел аккордеона по внутренним ссылкам страниц (#section1). Это означает, что если пользователь перейдет по URL-адресу mypage.com/page.php#test, я буду использовать JS для активации этого раздела аккордеона.

2) Сделайте заголовки каждого раздела аккордеона копируемыми ссылками на URL-адрес, который активирует указанный раздел аккордеона. Таким образом, если пользователь щелкнет правой кнопкой мыши «заголовок раздела» аккордеона и скопирует расположение ссылки, он поместит mypage.com/page.php#test в буфер обмена пользователя.

Я 1) разобрался, но это мой собственный код. Я возился с опцией navigation:true, но мне не повезло. Если кто-то захочет указать мне правильное направление, я бы предпочел использовать код автора, а не свой собственный, но если нет, ничего страшного, так как это завершено.

2) тут я в растерянности. Кажется, что аккордеон JQuery привязывает код к событиям щелчка в любом месте заголовка раздела аккордеона. Кажется, это делает невозможным предоставление пользователю функциональности местоположения ссылки для копирования, которую я хотел бы.

Мой HTML:

<div id="accordion">
   <article class="std_page_content">
    <h3><a id="#test">Test</a></h3>
    <div>
       test
    </div>
   </article>
   .....additional accordion sections....
</div>

Мой Javascript:

$("#accordion").accordion({header : "h3", heightStyle : "content", /*Allows full collapse*/collapsible: true, /*collapses sections*/ active:false, navigation:true});

var theUrl = window.location.href;
var hashValue = theUrl.contains("#") ? theUrl.split('#')[1] : null;

if(hashValue != null)
{
    //open the corresponding accordion section
}

javascript jquery jquery-ui jquery-ui-accordion
person thatidiotguy    schedule 04.02.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Просто дайте вашим якорным тегам атрибут href:

<h3><a id="#test" href="#test">Test</a></h3>

Обновление: если вы хотите, чтобы ссылка покрывала весь заголовок аккордеона, вы можете поместить тег <h3> внутри тега привязки, как показано здесь: http://jsfiddle.net/3tGYB/1/

<div id="accordion">
  <article class="std_page_content">
    <a id="#test" href="#test" class="header"><h3>Test</h3></a>
    <div>
      test
    </div>
  </article>
</div>

И, конечно же, измените свой javascript:

$("#accordion").accordion({header : "a.header" /*plus other options*/});
person Jeff-Meadows    schedule 04.02.2013
comment
Я не уверен, что понимаю это. Это просто заставило бы его ссылаться на себя. Это как-то связано с опцией navigation? - person thatidiotguy; 04.02.2013
comment
Если вы добавите атрибут href к своей ссылке, вы сможете щелкнуть правой кнопкой мыши и скопировать адрес ссылки, что является вашей заявленной второй целью. Как вы упомянули, пользовательский интерфейс jQuery обрабатывает события щелчка в аккордеоне, включая предотвращение обновления URL-адреса. Вы можете проверить это на jsfiddle: jsfiddle.net/3tGYB - person Jeff-Meadows; 04.02.2013
comment
Это работает нормально. Единственная проблема заключается в том, что вы должны быть прямо над заголовком, чтобы его можно было скопировать/вставить. Я собираюсь продолжить поиск решения, которое позволит копировать/вставлять, когда вы находитесь над любой частью заголовка раздела. Спасибо. - person thatidiotguy; 05.02.2013
comment
Обновлен ответ, чтобы разрешить копирование/вставку для всего заголовка раздела. - person Jeff-Meadows; 05.02.2013
comment
А, спасибо за констатацию очевидного. Я попробую это, как только найду ошибку, которую ищу, и приму ее в случае необходимости. Спасибо! - person thatidiotguy; 05.02.2013