Question

我正在尝试为手风琴上的折叠和扩展标题设置不同的背景图像。请提供帮助，说明如何实现这一目标。

Jquery的：

$(document).ready(function() { $('ul#accordion a.heading').click(function() {

        if($(this).parent().hasClass('current')) {          
            $(this).siblings('ul').slideUp('normal',function() {
                $(this).parent().removeClass('current');
            });
        } else {
            $('ul#accordion li.current ul').slideUp('normal',function() {
                $(this).parent().removeClass('current');
            });
            $(this).siblings('ul').slideToggle('normal',function() {
                $(this).parent().toggleClass('current');
            });

        }
        return false;
    }); });

HTML：

<ul id="accordion">

     <li id="AR" class="current">
       <a href="#" class="heading">ALL RESOURCES</a>
         <ul>resource options</ul>
     </li>


     <li id="BU">
       <a href="#" class="heading">BUREAUS</a>
         <ul>bureaus options</ul>
     </li>

     <li id="BN">
        <a href="#" class="heading">BUSINESS NEEDS</a>
          <ul>business options</ul>
     </li>

</ul><!-- END ACCORDION -->

CSS：

ul#accordion li a.heading { background-color: blue; }
ul#accordion li a.headingactive { background-color:red; }

我知道我的Accordion只涵盖了标题的点击功能，但我想知道我是否也可以使用ready函数。因此无论哪个标题扩展，它都会收到“headingactive”类。

Answer 1

如果它们在同一个li元素获得当前类，你真的不需要一个新类，因为你可以使用选择器ul＃accordion li.current a.heading（过于具体）。

在标题上设置展开/折叠背景图像

1 个答案: