开发者

Changing background image on accordion change - jQuery Ui

开发者 https://www.devze.com 2022-12-23 03:26 出处:网络
I am using this code: $(\'.ui-accordion\').bind(\'accordionchange\', function(event, ui) { $(this).next().next().css({\'background-image\':\'images/green-bg.jpg\'});

I am using this code:

        $('.ui-accordion').bind('accordionchange', function(event, ui) {
            $(this).next().next().css({'background-image':'images/green-bg.jpg'});
        //ui.newHeader // jQuery object, activated header
  //ui.oldHeader // jQuery object, previous header
 // ui.newContent // jQuery object, activated content
 // ui.oldContent // jQuery object, previous content
});

To try to change the background image of the PREVIOUS header after it changes. I see that the jquery docs supply the object for开发者_开发知识库 oldHeader, but I am trying to change the CSS of that element. Any ideas how I would do that?

So You go to the next one it goes green, then the current one is going to be red.


You just about have it. This works for me:

  $('#div0').bind('accordionchange', function(event, ui) {
      addMessage("change");
      if (typeof ui.oldHeader != "undefined") {ui.oldHeader.css({'background': 'Pink'});}
      if (typeof ui.oldContent != "undefined") {  ui.oldContent.css({'background': 'White'}); }
      if (typeof ui.newHeader != "undefined") {ui.newHeader.css({'background': 'Yellow'}); }
      if (typeof ui.newContent != "undefined") { ui.newContent.css({'background': 'LightGreen'}); }
  });

When I open a div, the header for the open div gets a yellow bg and the content gets a green bg. The just-closed header turns pink. You need to test for undefined because when closing a div and not opening another, the newHeader/Content is undefined. Likewise when opening a div, when previously all were closed, the oldHeader/Content is undefined.

working example: http://jsbin.com/arebi4/4

I figured this out by running the page in the debugger (either Firebug or IE8 F12 debugger works) and breaking in the accordionchange function.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号