[英]How to make jQuery Accordion a bit cleaner?
Using jQuery UI I created an accordion like so: 使用jQuery UI,我像这样创建了一个手风琴:
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
heightStyle: "content"
});
});
with this html: 与此HTML:
<div id="accordion">
<h5>First header</h5>
<div class="some_class"></div>
<h5>Second header</h5>
<div class="some_other_class"></div>
</div>
which looks like this (excluding the New Ticket button): 如下所示(不包括“新票证”按钮):
I now want the accordion headers to look more like the button: a white background and black text, but I'm kinda lost in where I should edit/add css. 现在,我希望手风琴标题看起来更像按钮:白色背景和黑色文本,但是我有点迷失在应该编辑/添加CSS的位置。
Does anybody know how I can easily change the background and the text color of this accordion? 有人知道我如何可以轻松地更改此手风琴的背景和文本颜色吗? All tips are welcome!
欢迎所有提示!
You can always add css styling just for the children of a particular DOM element. 您始终可以仅为特定DOM元素的子代添加css样式。 eg:
例如:
div#accordion h5 {
... custom styles ...
}
This does, however, mean that you must overwrite some/all of the default goodness you get from using jqueryui
. 但是,这确实意味着您必须覆盖使用
jqueryui
获得的部分/全部默认jqueryui
。 If you only want to apply styles to a specific element, right-click->Inspect element to see the exact name of the DOM tag you want to restyle. 如果只想将样式应用于特定元素,请右键单击-> Inspect元素以查看要重新样式化的DOM标记的确切名称。
UPDATE: Moving the span
around is just as easy, see updated fiddle . 更新:
span
移动同样容易, 请参见更新的小提琴 。
Doing just #accordion span { left:0; }
只做
#accordion span { left:0; }
#accordion span { left:0; }
may be sufficient for your purpose. #accordion span { left:0; }
足以满足您的目的。 If not, keep in mind... 如果没有,请记住...
DISCLAIMER: I do not recommend doing it as I have in the fiddle. 免责声明:我不建议像小提琴一样这样做。 Specifically this line:
具体来说这行:
background-position: -36px -20px;
is VERY hard to read, and anyone looking at your CSS without being familiar with jQueryUI's styling themes will wonder what you did. 很难阅读,任何不熟悉jQueryUI样式主题的人在看您的CSS时都会想知道您做了什么。 A better solution would be to outright replace the
background-image
in your span
s with a custom one, or or even get rid of them with display:none;
更好的解决方案是用自定义样式完全替换
span
的background-image
,或者甚至用display:none;
摆脱它们display:none;
and put in your own customised icons. 并放入您自己的自定义图标。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.