打开时,JQuery Accordion样式会发生变化

时间:2012-03-21 17:15:22

标签: javascript jquery accordion

我正在尝试使用jQuery手风琴来根据它是否处于活动状态以及它是顶部,底部还是夹在顶部和底部标题之间来改变角圆度。

我希望手风琴所包含的盒子在顶部和底部都是圆形的,无论如何。默认情况下,手风琴主题在已关闭的标题上也有圆角。

是否有一种风格方法可以指示手风琴在不活动时以及在顶部和底部之间具有90度角,而底部在不活动时具有圆角,在活动时具有90度角?或者这是一个更复杂的练习,使用自定义的javascript?

2 个答案:

答案 0 :(得分:2)

如何使用.addClass和.removeClass根据某些事件更改accordion headers div元素的css?点击它时会激活主动吗?再次单击以隐藏它时无效?

您可以检查.parent()或.sibling()元素,以确定它是否在其他手风琴标题div元素下面/旁边/下面?

答案 1 :(得分:0)

如果您正在寻找仅支持CSS的解决方案,也许这样的事情可以满足您的需求:

.accordion {
  border-radius: 10px;
}
.accordion [aria-expanded=false] {
  border-radius: 10px;
}
.accordion [aria-expanded=true] {
  border-radius: 0;
}
.accordion > [aria-expanded=false] + :last-child {
  border-radius: 10px;
}
.accordion > [aria-expanded=true] + :last-child {
  border-radius: 0;
}

代替.accordion,您应该放置与您的手风琴相匹配的选择器。请记住,这在IE8及更早版本中不起作用,但它应该适用于大多数其他最近的浏览器。我实际上没有试过这个,所以我不确定它是否会起作用。