Jquery 手风琴 header 状态 h3:before

Question

我有一个 Jquery 手风琴，我想在 header 之前插入字体很棒的图标。目前在我的代码中我有：

.ui-accordion h3:before {
    font-family: 'FontAwesome';
    content: '\f0da';
    margin:0 5px 0 -15px;
    color: #000;
    padding-right:10px;
}

它总是在手风琴的 h3 标题之前显示正确的插入符号。但是，我希望它仅在默认模式 ui-state-default 下显示，并希望在单击 header 或 .ui-state-active 时执行其他操作。当我尝试添加 .ui-accordion .ui-state-default h3:before 代替 .ui-accordion h3:before 时，右边的插入符号消失了。我如何在 CSS 中执行此操作？

Answer 1

$('#YOURELEMENT li a').click(function(){
    $(this).next('ul').slideToggle('500');
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});

这会将您的 fontawesome 图标替换为单击 jquery 时的另一个图标。\ 尝试在 HTML 中动态添加字体 awesome 而不是使用 css 这会使事情变得复杂

Answer 2

因为我记得元素 "ui-accordion > h3" 有自己的 class "ui-state-default" 所以正确的代码应该是：

.ui-accordion .ui-state-default:before {
  font-family: 'FontAwesome';
  content: '\f0da';
  margin:0 5px 0 -15px;
  color: #000;
  padding-right:10px;
}

你也可以简单的使用

.ui-state-default:before {
  //your_code
}

Jquery 手风琴 header 状态 h3:before

Jquery Accordion header state with h3:before

css

jquery

jquery-ui

jquery-ui-accordion