Question

我已禁用特定的手风琴，并希望将它们的图标更改为ui-icon-locked。

我有：

$(document).ready(function() {

   $(function() {
    $( "#accordion" ).accordion();

     $("#accordion").accordion("option", "icons",
        { 'header': 'ui-icon-circle-plus', 'headerSelected': 'ui-icon-circle-minus' });
        $( ".disabled" ).addClass("ui-state-disabled");
});

和

 <h6 class="disabled">Bacteriology in practice: interactive modules</h6>
      <div>
        <p class="text"> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
          Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
          ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
          lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>

我在css中尝试过：

.ui-accordion-header.disabled .ui-icon {
    ui-icon-locked;
}

但这不起作用。

这也行不通：

   $(function() {
    $( "#accordion" ).accordion();

     $("#accordion").accordion("option", "icons",
        { 'header': 'ui-icon-circle-plus', 'headerSelected': 'ui-icon-circle-minus' });
        $( ".disabled" ).addClass("ui-state-disabled");

 $(".disabled").accordion("option", "icons",
        { 'header': 'ui-icon-locked', 'headerSelected': 'ui-icon-locked' });
        $( ".disabled" ).addClass("ui-state-disabled");
});

有什么想法吗？

Answer 1

只需将.ui-icon-locked中的css复制到.ui-accordion-header.disabled .ui-icon的规则集中。

jQuery UI CSS使用精灵表，因此您只需更改background-position即可将新图标显示在视图中。

已锁定的手风琴图标

1 个答案: