JQuery Accordion разворачивает / сворачивает каждый заголовок, не сворачивая расширенные заголовки

Question

JQuery Accordion разворачивает / сворачивает каждый заголовок, не сворачивая расширенные заголовки

0

Я новичок в мире JQuery. Я решил использовать JQuery-аккордеон для моей программы. Но функциональность, в которой я нуждаюсь, не поддерживает контроль Accordion. Мне нужно развернуть/свернуть каждый заголовок, щелкнув по нему, не сворачивая расширенные заголовки. Я нашел пример в JS Bin, но, похоже, он не работает для меня, я использую JQuery UI 1.10.3. Как я могу это решить? Можно ли переопределить функциональность управления Accordion для достижения цели?

Arsen Alexanyan 07 дек. 2013, в 10:27

Источник

2

можешь поделиться своим кодом в jsfiddle
Kawinesh SK 07 дек. 2013, в 08:50

Теги:

javascript

jquery

jquery-ui

3 ответа

Ещё вопросы

можешь поделиться своим кодом в jsfiddle

n1kkou · Answer 1 · 2013-12-07T11-39-00.000Z

В примере jsbin, который вы указали, замените вторую строку следующим:

$accordionIO.next('div').hide();

Kawinesh SK · Answer 2 · 2013-12-07T07-21-00.000Z

добавьте следующее в свой JS

$.fn.togglepanels = function(){
  return this.each(function(){
    $(this).addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
  .find("h3")
    .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
    .hover(function() { $(this).toggleClass("ui-state-hover"); })
    .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
    .click(function() {
      $(this)
        .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
        .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
        .next().slideToggle();
      return false;
    })
    .next()
      .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
      .hide();
  });
};

$("#notaccordion").togglepanels();\\GIVE YOUR ACCORDIONID IN THE PLACE OF **#notaccordion**

DEMO

Hardy · Answer 3 · 2013-12-07T06-37-00.000Z

этот пример использует функцию jQuery slideToggle для переключения состояний. В JQuery есть также функции:

// "Open" element
$('div').slideDown();

а также

// "Close" element
$('div').slideUp();

Так, например, чтобы открыть все div: s под аккордеон:

$('.accordion div').slideDown();