jQuery UI - Проблемы с отображением аккордеона - PullRequest
0 голосов
/ 16 июня 2010

Мой аккордеон работает нормально, но у меня проблема с JS, из-за которой он не отображается правильно.

http://jsfiddle.net/frEWQ/4/

  1. JS не применяет .ui-corners-all к H3 после того, как div "kwick" под ним завершил свертывание, давая странное отсечениеграницы после анимации

Есть предложения?

Спасибо

        // find elements to show and hide
    var toShow = clicked.next(),
        toHide = this.active.next(),
        data = {
            options: o,
            newHeader: clickedIsActive && o.collapsible ? $([]) : clicked,
            oldHeader: this.active,
            newContent: clickedIsActive && o.collapsible ? $([]) : toShow,
            oldContent: toHide
        },
        down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );

    this.active = clickedIsActive ? $([]) : clicked;
    this._toggle(toShow, toHide, data, clickedIsActive, down);

    // switch classes
    this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
        .find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
    if (!clickedIsActive) {
        clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top")
            .find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected);
        clicked.next().addClass('ui-accordion-content-active');
    }

    return;

1 Ответ

1 голос
/ 16 июня 2010

Обновлено: Вы можете изменить источник, но это не очень хорошая идея.

Поскольку он ожидает, что в этом конкретном формате вам может понадобиться сделать что-то хитрое с CSS, чтобы избежать этого мерцания.

  • Как насчет того, чтобы иметь полный радиус границы в 20px во всех углах h3 всегда, даже когда элемент расширен.
  • Пусть контент использует несколько стилей, таких как следующие: padding-top:20px; position:relative; top:-20px; или что-то подобное, что увеличит 20px, а затем исправит положение, потянув его назад. Таким образом, когда он расширяется, он фактически перекрывает нижние углы h3. Если это не сработало padding-top:20px; margin-top:-20px; может.

По-моему, это работает. Я бы попробовал это в вашем посте jfiddle, но вы не поместили исходный код CSS в рамку css.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...