jquery使该颜色保持活动状态

一个手风琴风格的显示/隐藏导航系统，包含五个元素，可显示内容并在单击时隐藏。五个元素中的每一个都会在悬停时褪色为不同的颜色

如果元素是活动元素（例如，如果其子div可见），则需要防止onmouseout颜色返回动画

您可以在这里看到示例： 带有指向所有脚本的链接

总之：活动元素应移除onmouseout效果，以便活动颜色保持不变，不会返回其原始状态

此处使用David Walsh的dwFadingLinks函数为淡入淡出的基础：

jQuery.fn.dwFadingLinks = function(settings) {
settings = jQuery.extend({
    color: '#ff8c00',
    duration: 500
}, settings);
    return this.each(function() {
        var original = $(this).css('color');
        $(this).mouseover(function() { $(this).animate({ color: settings.color },settings.duration); });
        $(this).mouseout(function() { $(this).animate({ color: original },settings.duration); });
    });
};

$(document).ready(function() {
$('#blue').dwFadingLinks({
    color: '#36F',
    duration: 500
});
$('#orange').dwFadingLinks({
    color: '#F90',
    duration: 500
});
$('#pink').dwFadingLinks({
    color: '#F09',
    duration: 500
});
$('#dkblue').dwFadingLinks({
    color: '#06C',
    duration: 500
});
$('#green').dwFadingLinks({
    color: '#093',
    duration: 500
});
 });

显示/隐藏脚本不使用jquery Accordion，而是使用以下脚本：

$(document).ready(function() {
  $('div.demo-show h3').add('div.demo-show2 h3').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });
  $('div.demo-show h3').click(function() {
    $(this).addClass('active');
  }, function() {
    $(this).removeClass('active');
  });
});

$(document).ready(function() {
  $('div.demo-show> div').hide();  
  $('div.demo-show> h3').click(function() {
    $('div.demo-show> h3').removeClass('active');
    $('div.demo-show> h3').removeClass('hover');
    $(this).addClass('active');
    var $nextDiv = $(this).next();
    var $visibleSiblings = $nextDiv.siblings('div:visible');

    if ($visibleSiblings.length ) {
      $visibleSiblings.slideUp('fast', function() {
        $nextDiv.slideToggle('fast');
      });
    } else {
       $nextDiv.slideToggle('fast');
    }
  });
});