jQuery UI手风琴-如何完全删除样式？

Question

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

我想摆脱所有的样式、图片、边框、颜色等...

我没有看到这个选项，他们应该添加这个选项。或者我错了吗？

- Etienne Dupuis

---

如果需要的话，您可以在CSS中覆盖它。 - kobe

似乎没有内置的方法可以做到这一点。虽然这很遗憾——但对我来说，有一个像“主题：false”这样的选项是完全合理的。 - schellmax

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操作。 请注意，带有'class'属性的 'content' 元素可以包含任何你想要的内容，包括 <div>，<p>或者其他元素，因为 .siblings 和 .next 只适用于同一层级。

- Bene

---

我用你的代码创建了一个 jsFiddle（并稍作修改），它能够很好地工作。http://jsfiddle.net/sikodelika/2Cazf/--谢谢。 - Yaz

仅供参考，此答案不会处理手风琴的 collapsible: true 选项。 - AYK

它本身是可折叠的。如果您不想让它可折叠，只需注释掉该行：$(e.target).next('div').siblings('div').slideUp(); - Bene

@yaz发生了什么？那个链接无法使用。这是链接：http://jsfiddle.net/2Cazf/。 - Toskan

Answer 2

如果你对UI主题不感兴趣（就像我一样），那么请不要包含主题CSS文件。

- dovidweisz

---

这样做会不会在某些功能依赖于 CSS 框架提供的部分时出现问题呢？（我特别想到 .ui-helper-* 类） - prodigitalson

如果您正在使用JS的这些辅助类：它们仍将存在（并且对于您自己的样式非常有用），但是如果您的网站通常使用主题，那么您需要听取prodigitalson的建议。 - dovidweisz

在这种情况下，您可以将手风琴放置在具有特定ID的<div>标签中，并覆盖该ID的样式： - Carles Barrobés

如果我们只需要“行为”而不需要“样式”，那么排除jQuery主题CSS是有道理的。 jQuery应该通过使主题CSS 100％可选来支持“关注点分离”概念，以便所有行为都能在没有样式效果的情况下工作。可选择地，他们应该提供自定义CSS类作为参数来覆盖可选的默认样式，即“仅在存在时应用样式”。 - Antonio Ooi

Answer 3

我需要（想要）做同样的事情。在我的情况下，我想去掉手风琴内容所提供的额外填充，它看起来像这样：

.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; }

在我的 CSS 中，我只是简单地加入了以下代码：

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

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

罗布

- Rob

Answer 4

我猜你已经解决了这个问题，因为你是在2010年写的。 顺便说一下，在官方jQueryUI网站上，在下载主题之前现在可以通过控制面板避免每个UI小部件的样式。

http://jqueryui.com/themeroller/

如果需要取消手风琴效果，只需取消复选框按钮“手风琴”并下载生成的文件即可。

我知道回答有点晚了，但我认为这可能会有用...以防万一 :)

- Fabrizio Sabato

Answer 5

一般情况下，你不会用js来做这个，所以没有这个选项。你需要重写css。查看基础的css文件，搜索.ui-accordian，还会有一些通用的.ui-widget类需要重写。我通常在Firebug中加载它并查看被应用的样式，这样我就知道所有需要重写的内容，以实现我想要的外观和感觉。

- prodigitalson

Answer 6

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

当您下载主题时，只需提供CSS作用域，例如：.jquerythemeon，

然后将该类放置在您想要应用主题的所有元素中。

编辑：今天我遇到了一些作用域错误，在structure.min.css中，作用域始终是“jquerythemeon”而不是“.jquerythemeon”。为了修复它，只需替换所有出现次数。

- Reign.85

Answer 7

使用clearStyle选项来删除默认样式：

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

- Blerim J

---

这对我不起作用，它仍然具有UI主题，如何删除任何主题？ - hackp0int

这仅仅是清除该元素默认的宽度和高度，而不是清除jQuery主题。 - levhita