Аккордеон jQuery: отключить расширение при щелчке по заголовку, назначить ссылке

ProgramBox

Аккордеон jQuery: отключить расширение при щелчке по заголовку, назначить ссылке

Post author:admin
Запись опубликована:27 августа, 2022
Post category:Вопросы по программированию

#jquery #html #jquery-ui #accordion

#jquery #HTML #jquery-пользовательский интерфейс #аккордеон

Вопрос:

Есть ли способ отключить расширение разделов при щелчке заголовка и вместо этого назначить функциональность ссылке, включенной в заголовок? Идея состоит в том, чтобы кнопка слева от заголовка расширяла и сворачивала заголовок. Я надеюсь, что это позволит мне включить в заголовок другие элементы, которые будут доступны без расширения / сворачивания. Спасибо!

Ответ №1:

Вот способ сделать это. В основном, я инициализирую accordion с disable помощью событий option и binding click , которые сначала включают accordion, затем выполняют аккордеон и, наконец, отключают accordion.

HTML:

 <div class="demo">
  <div id="accordion">
    <h3>
        <a href="#">Section 1</a>
        <a href="#" data-index="0" class="trigger">Expand this</a>
    </h3>
    <div>
      <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo
        ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
      </p>
    </div>
    <h3>
        <a href="#">Section 2</a>
        <a href="#" data-index="1" class="trigger">Expand this</a>
    </h3>
    <div>
      <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit
        faucibus urna.
      </p>
    </div>
    <h3>
        <a href="#">Section 3</a>
        <a href="#" data-index="2" class="trigger">Expand this</a>
    </h3>
    <div>
      <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia
        ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
      </p>
      <ul>
        <li>
          List item one
        </li>
        <li>
          List item two
        </li>
        <li>
          List item three
        </li>
      </ul>
    </div>
    <h3>
        <a href="#">Section 4</a>
        <a href="#" data-index="3" class="trigger">Expand this</a>
    </h3>
    <div>
      <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus et
        malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus
        orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel
        est.
      </p>
      <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.
      </p>
    </div>
  </div>
</div>

Javascript:

 $(function() {
    $("#accordion").accordion({ disabled: true });
    $(".trigger").click(function() {
        $("#accordion").accordion("enable").accordion("activate", parseInt($(this).data("index"), 10)).accordion("disable");
    });
});

1. И если вы не хотите использовать data-index , вы можете найти индекс из заголовка и использовать его следующим образом: $("#accordion").accordion("enable").accordion("activate", $("#accordion h3").index($(this).parent())).accordion("disable");

2. Когда я заменил «#» в «<a href=»#»> Раздел 1 </a>» на URL-адрес другой страницы, такой как «<a href=» Section/» rel=»nofollow noreferrer»> google.com «>Раздел 1</a>» ссылка не была активирована. Для меня решением было заменить href на onclick=’window.open(» google.com » );’.

Ответ №2:

Вы можете просто указать свой элемент заголовка:

 $( ".selector" ).accordion({ header: 'h3' });

1. AFAIK, элемент заголовка — это не только то, что запускает действие открытия / закрытия. Он также определяет, что остается видимым после свертывания. Таким образом, переопределив заголовок на что-то еще, мы отключаем триггер при щелчке (по своему усмотрению), но также получаем скрытый реальный заголовок при сворачивании (нежелательный).

2. Также требуется, чтобы элемент содержимого был непосредственным родственным после элемента, определенного как заголовок. Это не будет соответствовать рассматриваемому случаю, поскольку ссылка не будет находиться рядом с элементом содержимого (очевидно, с некоторой оболочкой div). IMO

Ответ №3:

Лучший способ — отменить привязку обработчика щелчков:

     $(function () {
      $("#accordionId").accordion({
         collapsible: true,
         active: false,
         animate: 0,
         icons: false
      });

      $(".ui-accordion-header").unbind('click').click(function() {
         alert('dsds');
      });
   });

Ответ №4:

Как указано выше.
Если вы используете только один аккордеон или имеете ту же функциональность / интерфейс, я бы обычно редактировал фактический файл Java script

например. jquery.accordion

Я бы изменил настройки по умолчанию в нижней части файла с «заголовок: «a»» на что-то вроде «заголовок: «acc-заголовок»»

Ответ №5:

ИМО, самый элегантный способ — установить для события значение none при инициализации аккордеона:

 $("#accordion").accordion({
  event: "none"
});

Затем можно запустить раздел из кода:

 $("#accordion").accordion("option", "active", 0);

Пример JSFiddle

Пожалуйста, обратите внимание, если вы используете более старую версию jq-ui, вам может потребоваться использовать более старый метод — активировать (вместо «опция», «активный»)

Метки: Аккордеон jQuery: отключить расширение при щелчке по заголовку назначить ссылке