两个jquery手风琴在同一页面中的不同风格

Question

我的页面中有两个jquery手风琴。 一个在东部，一个在西部面板。 是否有可能以不同的方式设计它们？ 编辑.ui-手风琴相关的风格改变了两种手风琴的风格。 有没有办法为这两种手风琴提供不同的风格？

提前致谢 。

Answer 1

只需向两者添加不同的ID（或类），然后将它们添加到CSS选择器。 或者，您可以添加父元素的ID。 例如：

.ui-accordion{...}
.ui-accordion div{...}
.ui-accordion .arrow{...}

变

#left-column .ui-accordion{...}
#left-column .ui-accordion div{...}
#left-column .ui-accordion .arrow{...}

#right-column .ui-accordion{...}
#right-column .ui-accordion div{...}
#right-column .ui-accordion .arrow{...}

Answer 2

是的，你可以用一些技巧。
您所要做的就是覆盖其他手风琴的jQuery，UI和CSS，就像这样 。

Answer 3

是的，现在可以在jQuery中定义额外的id，就像这样

HTML

<div id="slider1" class="east">
   // some code of your html
</div>

<div id="slider2" class="east">
   // some code of your html
</div>

CSS

#slider1.east .somecss{
 // css style as like your requirement 
 }

#slider2.east .somecss{
 // css style as like your requirement 
 }

Answer 4

你可以使用jQuery eq()方法：

$('.ui-accordion:eq(0)').addClass('first') // the first ui.accordion element

或CSS3 nth-child伪选择器：

.ui-accordion:nth-child(1) { the first ui.accordion element
   property: value;
}

Answer 5

另一个选择是使用两个主题，每个主题一个。 下载jQueryUi时，单击“主题”下右侧边栏中的“高级主题设置”。 使用“CSS范围”和“主题文件夹名称”字段。 几乎没有帮助图标来解释该怎么做。

我从来没有这样做过，所以我不能告诉你这是多么容易或多么困难。