jQuery UI Accordion - 如何完整地删除样式？

I love the functionality of the jQuery accordion (http://jqueryui.com/demos/accordion/) however I do not want the style !!

我喜欢jQuery手风琴的功能(http://jqueryui.com/demos/accordion/)但是我不喜欢这种风格!

I'd like to get rid of all the styles, the img, the border, the color, etc...

我想摆脱所有款式,img,边框,颜色等......

I don't see an option for this, this is something they should add. Or I am mistaking?

我没有看到这个选项,这是他们应该添加的东西。或者我错了?

7 个解决方案

#1

You can make your own accordion. Using the jQuery accordion without the UI is pointless. Creating your own accordion adapted to your site is kind of easy. You just need to fix the way you want to build it...let's say:

你可以自己制作手风琴。在没有UI的情况下使用jQuery手风琴毫无意义。创建适合您网站的自己的手风琴很容易。你只需要修改你想要构建它的方式......让我们说:

<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>

Then, you just need to make something like

然后,你只需要制作类似的东西

//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();
});

You can now edit your class as you want since you actually don't need them for the JavaScript. Note that the with the class 'content' can contain whatever you want, including , other or since the .siblings and .next only apply to the same hierarchy.

您现在可以根据需要编辑您的类,因为您实际上不需要它们用于JavaScript。请注意,类'content'可以包含您想要的任何内容,包括,其他或因为.siblings和.next仅适用于同一层次结构。

#2

If your'e not interested in the ui-theme (like me) then don't include the theme css files

如果你对ui-theme(像我一样)不感兴趣,那么不要包含主题css文件

#3

I needed (wanted) to do the same thing. In my case I wanted to remove the extra padding the default css provides for accordion-content, which looks like this:

我需要(想要)做同样的事情。在我的情况下,我想删除默认css为accordion-content提供的额外填充,如下所示:

.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 I simply added this:

在我的CSS中我简单地添加了这个:

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

This successfully set (overrode) just the padding.

这成功设置(覆盖)只是填充。

Rob

#4

I guess you have already solved the problem since you wrote in 2010. By the way, now it's possible to avoid styling of each ui widget by control panel, in the official jqueryUI website, before download the theme.

自从你在2010年写完以来,我猜你已经解决了这个问题。顺便说一句,现在可以在官方的jqueryUI网站上,在下载主题之前,通过控制面板避免每个ui小部件的样式。

http://jqueryui.com/themeroller/

In case of Accordion, just 'uncheck' the checkbox button 'Accordion' and download the generated file.

如果是Accordion,只需“取消选中”复选框按钮'Accordion'并下载生成的文件。

It's quite late to answer I know but I think it could be useful... just in case :)

现在回答已经很晚了,但我认为这可能很有用......以防万一:)

#5

You dont generally do this via js thats why ther eis no option. You override the css. Check out the base css file and search for .ui-accordian.. there will also be styles scoped to some geenral .ui-widget classes you need to override. I usually load it up in Firebug and take a look at whats being applied so i know everything i need to overried to give it my look and feel.

你通常不会通过js这样做,为什么这是没有选择。你重写css。查看基本css文件并搜索.ui-accordian ..还有一些样式作用于你需要覆盖的一些geenral .ui-widget类。我通常在Firebug中加载它并看看应用的是什么,所以我知道我需要覆盖的所有东西,以给它我的外观和感觉。

#6

Forget all theese tricks, overrides or other pains.

忘记所有的诡计,重写或其他痛苦。

You just have to provide a css scope when you donwload your theme, like: .jquerythemeon

您只需在下载主题时提供css范围,例如:.jquerythemeon

and then put the class to all elements you want to be themed

然后把课程放到你想成为主题的所有元素上

EDIT: I got some bugs with scope today, in structure.min.css the scope was always generated with "jquerythemeon" and not ".jquerythemeon". To fix it just replace all occurences

编辑:我今天得到了一些带有范围的bug,在structure.min.css中,范围总是用“jquerythemeon”而不是“.jquerythemeon”生成。要解决它,只需更换所有出现

#7

-10

To remove default style use clearStyle option:

要删除默认样式,请使用clearStyle选项:

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

#1

<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>