jQuery UI 手风琴 - 如何完全删除样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4287225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Accordion - How to remove style completly?
提问by Etienne Dupuis
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?
我没有看到这个选项，这是他们应该添加的内容。还是我错了？
回答by Bene
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' 可以包含您想要的任何内容，包括 、other 或因为 .siblings 和 .next 仅适用于相同的层次结构。
回答by dovidweisz
If your'e not interested in the ui-theme (like me) then don't include the theme css files
如果您对 ui 主题不感兴趣（像我一样），则不要包含主题 css 文件
回答by Rob
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 为手风琴内容提供的额外填充，如下所示：
.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 MYcss I simply added this:
在我的css 中，我简单地添加了这个：
.ui-accordion .ui-accordion-content {padding: 0;}
This successfully set (overrode) just the padding.
这成功地设置（覆盖）了填充。
Rob
抢
回答by Fabrizio Sabato
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/
http://jqueryui.com/themeroller/
In case of Accordion, just 'uncheck' the checkbox button 'Accordion' and download the generated file.
如果是手风琴，只需“取消选中”复选框按钮“手风琴”并下载生成的文件。
It's quite late to answer I know but I think it could be useful... just in case :)
我知道现在回答已经很晚了，但我认为它可能有用......以防万一:)
回答by prodigitalson
You dont generally do this via js thats why ther eis no option. You override the css. Check out the base css fileand search for .ui-accordian.. there will also be styles scoped to some geenral .ui-widgetclasses 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.. 还会有一些样式范围限定在.ui-widget您需要覆盖的一些通用类中。我通常在 Firebug 中加载它并查看正在应用的内容，所以我知道我需要覆盖的一切以使其具有我的外观和感觉。
回答by Reign.85
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
编辑：我今天在范围上遇到了一些错误，在 structure.min.css 中，范围总是用“jquerythemeon”而不是“.jquerythemeon”生成。要修复它，只需替换所有出现的
回答by Blerim J
To remove default style use clearStyle option:
要删除默认样式，请使用 clearStyle 选项：
$( ".selector" ).accordion({ clearStyle: true });
