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

Question

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

我想摆脱所有的样式，img，边框，颜色等......

我没有看到这个选项，这是他们应该添加的东西。还是我误会了？

Answer 1

您可以制作自己的手风琴。在没有 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>

然后，您只需要制作类似的内容

//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”中的 可以包含您想要的任何内容，包括 、 other 或 因为 .siblings 和 .next 仅适用于同一层次结构。

Answer 2

如果你对 ui 主题不感兴趣（像我一样），那么不要包含主题 css 文件

Answer 3

我需要（想要）做同样的事情。就我而言，我想删除默认 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; }

在 MY css 中，我只是添加了以下内容：

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

这成功设置（覆盖）了填充。

抢

Answer 4

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

http://jqueryui.com/themeroller/

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

我知道回答已经很晚了，但我认为它可能有用......以防万一:)

Answer 5

你通常不会通过 js 来做到这一点，这就是为什么没有选择。你重写了CSS。查看基本 css 文件 并搜索 .ui-accordian.. 还会有一些样式作用于您需要覆盖的一些通用 .ui-widget 类。我通常将其加载到 Firebug 中并查看正在应用的内容，这样我就知道需要重写的所有内容才能赋予它我的外观和感觉。

Answer 6

忘记所有这些技巧、覆盖或其他痛苦。

下载主题时，您只需提供 css 范围，例如：
.jquerythemeon

然后将该类放入您想要主题化的所有元素

编辑：
我今天遇到了一些范围错误，在 Structure.min.css 中，范围始终是使用“jquerythemeon”而不是“.jquerythemeon”生成的。要修复它只需替换所有出现的情况

Answer 7

要删除默认样式，请使用clearStyle选项：

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