JQuery UI Аккордеон - Как удалить стиль полностью?

Question

Мне нравится функциональность аккордеона jQuery (http://jqueryui.com/demos/accordion/), но мне не нужен стиль !!

Я бы хотел избавиться от всех стилей, img, границы, цвета и т. Д. *

Я не вижу возможности для этого, это то, что они должны добавить. Или я ошибаюсь?

Answer 1

Вы можете сделать свой собственный аккордеон. Использовать аккордеон JQuery без UI бессмысленно. Создать свой аккордеон, адаптированный к вашему сайту, довольно просто. Вам просто нужно исправить так, как вы хотите построить ... скажем:

<div id='container'>
  <a href='javascript:;'>First link</a>
  <div class='content'>  SOME CONTENT HERE </div>
  <a href='javascript:;'>Second link</a>
  <div class='content'>  SOME CONTENT HERE </div>
  ...
</div>

Тогда вам просто нужно сделать что-то вроде

//On click any <a> within the container
$('#container a').click(function(e) {
        //Close all <div> but the <div> right after the clicked <a>
    $(e.target).next('div').siblings('div').slideUp();
        //Toggle open/close on the <div> after the <a>, opening it if not open.
        $(e.target).next('div').slideToggle();
});

Теперь вы можете редактировать свой класс по своему усмотрению, поскольку он вам на самом деле не нужен для JavaScript. Обратите внимание, что с классом 'content' может содержаться все, что вы хотите, в том числе, другое или, поскольку .siblings и .next применяются только к той же иерархии.

Answer 2

Мне нужно (хотелось) сделать то же самое.В моем случае я хотел удалить дополнительный отступ, который css по умолчанию предоставляет для аккордеонного контента, который выглядит так:

.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }

In MY css Я просто добавил это:

 .ui-accordion .ui-accordion-content {padding: 0;}    

Это успешно установило (переопределило) только отступы.

Роб

Answer 3

Если вас не интересует ui-тема (как и я), не включайте файлы css theme

Answer 4

Полагаю, вы уже решили проблему с тех пор, как написали в 2010 году. Кстати, теперь можно избежать стилизации каждого виджета пользовательского интерфейса с помощью панели управления на официальном сайте jqueryUI перед загрузкой темы.

http://jqueryui.com/themeroller/

В случае Аккордеона, просто снимите флажок «Аккордеон» и загрузите сгенерированный файл.

Уже поздно отвечать, я знаю, но я думаю, что это может быть полезно ... на всякий случай:)

Answer 5

Вы обычно не делаете это через JS, поэтому у них нет выбора.Вы отменяете CSS.Проверьте базовый css файл и найдите .ui-accordian .. там также будут стили, ограниченные некоторыми классами geenral .ui-widget, которые необходимо переопределить.Я обычно загружаю его в Firebug и смотрю на то, что применяется, поэтому я знаю все, что мне нужно, чтобы придать ему внешний вид.

Answer 6

Забудьте все эти трюки, переопределения или другие неприятности.

Вы просто должны указать область действия CSS, когда загружаете свою тему, например: .jquerythemeon

, а затем поставить класс всемэлементы, которые вы хотите использовать в качестве тематических элементов

РЕДАКТИРОВАТЬ: сегодня я получил несколько ошибок с областью видимости, в struct.min.css область видимости всегда генерировалась с помощью "jquerythemeon", а не ".jquerythemeon".Чтобы исправить это просто замените все случаи

Answer 7

Чтобы удалить стиль по умолчанию, используйте параметр clearStyle:

 $( ".selector" ).accordion({ clearStyle: true });