Аккордеонный расширяющийся компонент из одного элемента в пользовательском интерфейсе jQuery

Мне нужно реализовать расширяющееся/сворачивающееся поле в пользовательском интерфейсе jQuery. В свернутом виде будет отображаться только заголовок окна. При расширении будет отображаться заголовок + содержимое.

То, что мне нужно сделать, очень близко к одноэлементному аккордеону jQuery UI с alwaysOpen=false (это же свойство называется «сворачиваемым» в документе, но на практике с jQuery 1.3.2 и jQuery UI 1.6rc6 оно кажется всегда открытым) :

$('.myAccordion').accordion({
    header: 'h3'
    , alwaysOpen: false
});

Есть одна проблема: мне нужно, чтобы развертывание/свертывание происходило только при нажатии на треугольник слева, а не при нажатии на весь заголовок.

Дополнительным требованием является то, что я хотел бы использовать стили пользовательского интерфейса jQuery UI по умолчанию, а не реализовывать свою собственную таблицу стилей, чтобы при необходимости я мог создавать новые стили с помощью themeRoller. Стили аккордеона в пользовательском интерфейсе jQuery (включая стрелки в заголовке) очень хорошо подходят для этой цели.

Теперь у меня есть два варианта:

1) настроить виджет Аккордеон так, чтобы только треугольник реагировал на события развертывания/свертывания. Мне нужно, чтобы клики по остальной части заголовка в основном игнорировались.

2) реализовать свой собственный виджет, используя стили аккордеона в качестве основы.

Я бы предпочел сделать 1), но мне трудно понять, как заставить только стрелку реагировать на события щелчка.

Итак, что касается самого вопроса, как бы вы это сделали?


jquery accordion expander
person Jaanus    schedule 25.02.2009    source источник
comment
Вы можете сделать это просто с помощью jQuery без плагина «Согласно пользовательскому интерфейсу». Это что-то, что вы хотели бы получить в качестве ответа?   -  person hunter    schedule 25.02.2009
comment
Плагин Accordion UI делает кликабельным весь заголовок элемента. Я бы хотел, чтобы кликабельным был только треугольник, а не весь заголовок.   -  person Jaanus    schedule 25.02.2009
comment
... тьфу, перечитай вопрос. Да, без пользовательского интерфейса Accordion можно обойтись, я ищу пример того, как это легко сделать и повторно использовать стили пользовательского интерфейса.   -  person Jaanus    schedule 25.02.2009

Ответы (2)


arrow_upward
1
arrow_downward

Я сделал это так:

$('.accordion').accordion({
  header: '.accordion-header',
  collapsible: true
});
person Xander    schedule 03.11.2012

arrow_upward
0
arrow_downward

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

$('.myAccordion').accordion({
    header: 'h3'
    , alwaysOpen: false
    , event: 'click'
});

$('.myAccordion h3 a').click(function() {
    return false;
})

Хотя это плохая практика использования, поскольку целевая область клика очень мала, но это отвечает на вопрос, который я разместил.

person Jaanus    schedule 25.02.2009